例如在
Elment 组件库开发中需要依赖
deepmerge ,那么Webpack构建的时候不需要将该依赖bundle到
element-ui.common.js 中,而是将其添加到
Element 组件库(作为npm包发布)的
dependencies ,这样通过npm安装
Element 的同时也会安装它的依赖
deepmerge ,从而使得
element-ui.common.js 通过
require("deepmerge") 的形式引入该依赖不会报错。这里列出
element-ui.common.js 排除的一些代码:
// 排除utils源码(utils源码会通过`npm run build:utils`脚本构建)
module.exports = require("element-ui/lib/utils/dom");
// 排除vue
module.exports = require("vue");
// 排除国际化源码(国际化源码会通过`npm run build:utils`脚本构建)
module.exports = require("element-ui/lib/locale");
// 需要注意和Vue相关的JSX依赖(Vue CLI3系统构建的包也会有一个该功能的依赖)
module.exports = require("babel-helper-vue-jsx-merge-props");
// 排除一些Elment组件使用的其他依赖
module.exports = require("throttle-debounce/throttle");
// 排除UI组件源码(UI组件源码会通过`webpack --config build/webpack.component.js`脚本构建)
module.exports = require("element-ui/lib/option");需要注意
Element 发布的npm包入口文件就是
element-ui.common.js ,可以通过package.json中的
main 字段信息查看。
webpack --config build/webpack.component.js
webpack --config build/webpack.component.js 脚本用于构建commonjs2的UI组件(提供按需引入功能),执行该脚本最终会在
lib 下生成所有
Element 支持的UI组件(同时这些文件也会被
element-ui.common.js 总入口文件引用):
lib
├── alert.js # commonjs 组件
├── aside.js
├── button.js
├── ...查看
build/webpack.component.js 配置:
// ...忽略
const Components = require('../components.json');// Components是所有组件的构建入口列表










