create-react-app按需引入antd-mobile(转载)

因为觉得这篇文章比较好，所以转过来

转载自https://www.cnblogs.com/yinshiru/p/10370929.html

前提：不运行 npm run eject,如果运行了那么配置了也会报错

1.引入 react-app-rewired 并修改 package.json 里的启动配置:

1 npm i react-app-rewired@2.0.2-next.0 // 需要安装低版本否则npm start 会报错The "injectBabelPlugin" helper has been deprecated as of v2.0.

2.更改package,json文件的“script”内容为

1 "scripts": {
2   "start": "react-app-rewired start",
3   "build": "react-app-rewired build",
4   "test": "react-app-rewired test --env=jsdom",
5   "eject": "react-scripts eject"
6 },

3.安装babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

1 npm install babel-plugin-import --save-dev

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

1 const { injectBabelPlugin } = require('react-app-rewired');
2 module.exports = function override(config,env) {
3     config = injectBabelPlugin(['import',{ libraryName: 'antd-mobile',style:'css'}],config)
4     return config
5 }

5.完成配置按需引入

结果：