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

当前大部分UI框架设计的Webpack配置都相对复杂，例如 Element 、 Ant Design Vue 和Muse-UI等Vue组件库。例如Element，为了实现业务层面的两种引入形式（ 完整引入 和 按需引入 ），以及抛出一些可供业务层面通用的 utils 、 i18n 等，Webpack配置变得非常复杂。为了简化UI框架的设计难度，这里介绍一种简单的UI框架设计，在此之前先简单介绍一下 Element 的构建流程，以便对比新的UI框架设计。

一般组件库的设计者将引入形式设计成 完整引入 和 按需引入 两种形式： 完整引入 的开发相对便利，针对一些大型业务或者对于打包体积不是特别注重的业务， 按需引入 开发的颗粒度相对精细，可以减少业务的打包体积。

设计的UI框架实践项目的github地址是ziyi2/vue-cli3-lerna-ui，包括了preset.json、自己设计的Vue CLI插件以及自己设计的一系列UI组件（和生成的UI框架示例稍有不同），如果觉得整体结构有不合理的或者考虑不够全面的地方，欢迎大家提issue，这样我也可以对它进行完善。如果大家感兴趣，希望大家能够Star一下，这里拜谢大家了！

Element

首先了解 Element 的构建流程，查看 Element 2.7.0 版本 package.json 的npm 脚本 ：

// 其中的`node build/bin/build-entry.js` 生成Webpack构建入口"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",// 构建css样式"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",// 构建commonjs规范的`utils`"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",// 构建umd模块的语言包"build:umd": "node build/bin/build-locale.js",// 清除构建文件夹`lib`"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",// 总体构建"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",// 执行eslint校验"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

这里重点关注Element的构建脚本，忽略 测试、发布、启动开发态调试页面、构建演示页面 等脚本。

npm run dist

与 Element 构建相关的npm脚本繁多，但是 总体构建脚本 是 dist ：

"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme"