Reactファミリーバケツ+antdバックグラウンド管理システム(一)環境構築初期化プロジェクトカスタマイズテーマ

インストールと初期化
npmでインストール

npm install -g create-react-app yarn

新規プロジェクト

create-react-app antd-demo

プロジェクトにアクセスして開始

cd antd-demo
yarn start

ブラウザがアクセスするhttp://localhost:3000/ああ、Welcome to Reactのインタフェースを見ても成功しました.
導入antd

yarn add antd --save

その他の依存関係を追加

yarn add axios --save  //Axios       promise   HTTP  ，         node.js  
yarn add jsonp --save //    
yarn add less --save //(2.7.3   )，     ，antd      .bezierEasingMixin();
yarn add less-loader --save  //antd    less   ，     less,    。
yarn add moment --save //    
yarn add babel --svae  //  react jsx     es6             
yarn add babel-polyfill --save 
yarn add babel-plugin-import --save //      IE   TypeError:      “startsWith”     

Webpack構成yarn ejectの説明を表示します:create-react-app足場を使用してプロジェクトプロジェクトを初期化し、webpackの構成は非表示です.
カスタムantdトピック

{
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: require.resolve('less-loader'),
                options: {
                  modules: false,
                  modifyVars: {
                    '@primary-color': '#00936D',
                  },
                }
              },
            ],
          },

必要に応じてantdコンポーネントをwebpackにロードする.config.dev.jsでProcess JS with Babel検索

 plugins: [
                ['import', [{ libraryName: 'antd', style: true }]]
              ],

webpack.config.dev.jsの修正が完了すると、webpack.config.prod.jsも修正します.開発環境と配置の生産環境が一致することを保証する.再起動後に有効