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",
  })
);

完结!