babel-plugin-com-import

58组件库com-58-pc按需加载babel插件

一、基本使用

1、安装依赖

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

2、在webapck中配置babel-loader

module.exports = {
    ...
    module: {
            rules: [
                {
                    test: /\.(js|jsx)?$/,
                    use: "babel-loader",
                    exclude: /node_modules/
                },
            ]
    }
    ...
}

3、在.babelrc文件中配置

{
	"plugins": [
		[
			"com-import",
			{
				"library": "com-58-pc"
			}
		]
	]
}

二、在create-react-app初始化的项目中使用

1、安装依赖

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

2、启用babelrc配置

create-react-app初始化的项目禁用了babelrc配置文件，所以需要我们修改配置，让babelrc文件起作用，可通过以下几种方法来达到修改配置的目的。

直接修改的配置文件

运行npm run eject吐出webpack配置文件

找到config/webpack.config.js

在该文件中可以看到

babelrc被禁用了，可以直接将false改为true即可。

通过react-app-rewired重写配置

1、安装react-app-rewired

npm install react-app-rewired --save-dev

2、安装customize-cra

npm install customize-cra --save-dev

3、在项目根目录下创建 config-overrides.js

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

4、 config-overrides.js内容如下

const { useBabelRc, override } = require('customize-cra')

const config = override(useBabelRc())

module.exports = config

5、 修改package.json的scripts

  "scripts": {
    - "build": "react-scripts build",
    + "build": "react-app-rewired build",
  }

3、最后在项目根目录创建.babelrc文件，写入配置内容

{
	"plugins": [
		[
			"com-import",
			{
				"library": "com-58-pc"
			}
		]
	]
}