关于大中型前端项目为相识耦与复用,更多的公司会挑选本身封装组件库,那末一次引入全部组件库必定致使项目过大,怎样按需加载则必须要做
宿世 ant-design的babel插件babel-plugin-import
- 道理
[git项目地点](https://github.com/ant-design/babel-plugin-import)
在babel转码的时刻,把全部库‘antd’的援用,变成’antd/lib/button’细致模块的援用。如许webpack网络依靠module就不是全部antd,而是内里的button.
import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>);
↓ ↓ ↓ ↓ ↓ ↓
var _button = require('antd/lib/button');
ReactDOM.render(<_button>xxxx</_button>);
此生
那末天然我们的组件也能够一样的处置惩罚,以anole-lego为例
- 设置
babel-loader
// 编译增加
include: [
path.resolve(appDirectory, 'node_modules/anole-lego'),
//...others
]
// 按需加载支撑
// npm/yarn 装置依靠 `babel-plugin-import` 细致拜见该插件运用
// 设置以下
plugins: [
['import', {
'libraryName': 'anole-lego',
// libraryDirectory: 'lib',
camel2DashComponentName: false, // 是不是须要驼峰转短线
camel2UnderlineComponentName: false, // 是不是须要驼峰转下划线
customName: (name) => {
return `anole-lego/lib/components/${name}` // 中心设置 依据你本身的组件目次设置
},
style: () => {
return false
}
}],
//...others
]
- 运用
import { Button } from 'anole-lego';
ReactDOM.render(<Button>Start</Button>, mountNode);