create-react-app 引入 antd 及 解決 antd 樣式無法顯示的bug

方案一： npm run eject 暴露所有內建的配置 

安裝組件庫

yarn add antd babel-plugin-import

根目錄下新建.roadhogrc文件（別忘了前面的點，這是roadhog工具的配置文件，下面的代碼用於加載上一個命令安裝的import插件），寫入：

{
  "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": "css"
    }]
  ]
}

antd配置

修改 webpack.config.dev.js 和 webpack.config.prod.js文件,這里以webpack.config.dev.js舉例，

webpack.config.prod.js一樣配置即可：

// Process JS with Babel.
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    // 改動: 添加 antd 按需加載文件處理插件
    plugins: [
      ['react-html-attrs'],//添加babel-plugin-react-html-attrs組件的插件配置
      // 引入樣式為 css
      ['import', { libraryName: 'antd', style: 'css' }],
      // 改動: 引入樣式為 less
      //  ['import', { libraryName: 'antd', style: true }],
    ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
  },
},

引入模塊如下：

  // scr/App.js
  import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
  import './App.css';

方案二：React-app-rewired（一個對 create-react-app 進行自定義配置的社區解決方案）

1. 安裝react-app-rewired

npm install –save-dev react-app-rewired

2.修改package.json啟動項

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

3.在項目根目錄創建一個 config-overrides.js 用於修改默認配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4.使用babel-plugin-import實現Antd按需加載，修改config-overrides.js

npm install –save-dev babel-plugin-import

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config);
    return config;
};

5.使用react-app-rewire-less配置Less

npm install –save-dev react-app-rewire-less

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
   config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
    return config;
};

我遇到的問題： 1. \__DEV__ is not defined.

npm install –save-dev react-app-rewire-defind-plugin

config-overrides.js

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireDefinePlugin = require('react-app-rewire-define-plugin');

module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { "@primary-color": "#1DA57A" },
    })(config, env);
    config = rewireDefinePlugin(config, env, {
        __DEV__: false
    });
    return config;
};

注：在執行 yarn build 進行打包部署后，antd樣式沒有加載進去

解決方案：生產部署增加對antd的支持

// Process JS with Babel.
{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    // 改動: 添加 antd 按需加載文件處理插件
    plugins: [
      ['react-html-attrs'],//添加babel-plugin-react-html-attrs組件的插件配置
      // 引入樣式為 css
      ['import', { libraryName: 'antd', style: 'css' }],
      // 改動4: 引入樣式為 less
      //  ['import', { libraryName: 'antd', style: true }],
    ],
    compact: true,
  },
},