react 实现对antd-mobile的按需打包

下载依赖包

npm install babel-plugin-import --save-dev
npm install react-app-rewired --save-dev

修改package.json文件

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

在项目根目录下面添加config-overrides.js文件,文件内容

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
};

重启项目,报错了,错误如下

npm run start

The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! appnfc@0.1.0 start: react-app-rewired start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the appnfc@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

进到这里https://github.com/arackaf/customize-cra#available-plugins
，就看到一句话：Override webpack configurations for create-react-app 2.0，react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired，react-app-rewired的新版本删除所有方法injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中了

所以现在你可以开始下载这个包还有less,less-loader了

下载customize-cra

npm install customize-cra --save-dev

修改config-overrides.js 文件,文件内容:

const { override, fixBabelImports } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: "css",
  })
);

完结!