當前大部分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"