浅谈Vue CLI 3结合Lerna进行UI框架设计

2020-06-14 06:12:24易采站长站整理

例如在

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是所有组件的构建入口列表