對於大中型前端項目爲了解耦與複用,更多的公司會選擇本身封裝組件庫,那麼一次引入整個組件庫必然致使項目過大,如何按需加載則必需要作
[git項目地址](https://github.com/ant-design/babel-plugin-import)
在babel轉碼的時候,把整個庫‘antd’的引用,變爲'antd/lib/button'具體模塊的引用。這樣webpack收集依賴module就不是整個antd,而是裏面的button.javascript
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);