Create-react-app+Antd+Less配置

说明

React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。

方案

一. React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。
1. 安装react-app-rewired

npm install –save-dev react-app-rewired

1. 修改package.json启动项

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

1. 在项目根目录创建一个 config-overrides.js 用于修改默认配置。

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

1. 使用babel-plugin-import实现Antd按需加载，修改config-overrides.js
   

   npm install –save-dev babel-plugin-import

/* 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 */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 */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;};

1. Cannot read property ‘exclude’ of undefined
   参考 https://github.com/timarney/react-app-rewired/issues/145
   解决方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87

二. npm run eject 暴露所有内建的配置
1. 使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。

npm install –save-dev babel-plugin-import

1）package.json

"babel": {    "presets": [      "react-app"    ],    "plugins": [      [        "import",        {          "libraryName": "antd",          "style": true        }      ]    ]  },

2）.babelrc

{   "presets": [      "react-app"    ],    "plugins": [      [        "import",        {          "libraryName": "antd",          "style": true        }      ]    ]}

注意： 不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。

1. 引入Less

1）安装less-loader 和 less

npm install –save-dev less-loader less

2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找 ：exclude
原本的 exclude: [/\.js$/, /\.html$/, /\.json$/],
修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

查找：test: /.css$/
原本的 test: /\.css$/,
修改为 test: /\.(css|less)$/,

在这个test的下面找到use，添加loader

  use: [      {...},    {...},    {      loader: require.resolve('less-loader') // compiles Less to CSS    }  ],

ok，以上两种方式修改配置，择优选取。
如果引入Antd，可能依赖于引入Less，
如果不想引入Antd，可以舍弃Antd部分，按步骤引入Less。

https://github.com/zhaoyu69/antd-spa 包含第一种方式
https://github.com/zhaoyu69/nodejs-spider 包含第二种方式