// 其中的`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規(guī)范的`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",
// 執(zhí)行eslint校驗
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"

lib
├── directives     # commonjs指令(這里歸為utils)
├── locale      # commonjs國際化(commonjs語言包和API)
├── mixins  		# commonjs mixins(這里歸為utils)
├── theme-chalk 		# css 樣式文件
├── transitions			# commonjs transitions(這里歸為utils)
├── umd   		# umd語言包 
├── utils
├── alert.js     # commonjs組件
├── aside.js
├── ...
├── element-ui.common.js 	# commonjs2總文件 
├── ...
├── index.js     # umd總文件
├── ...

// 注釋說明該文件由build-entry.js腳本自動生成
/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
// ... 這里省略大部分組件引入
import TimelineItem from '../packages/timeline-item/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
 Pagination,
 // ... 這里省略大部分組件
 TimelineItem,
 CollapseTransition
];

const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);

 components.forEach(component => {
 Vue.component(component.name, component);
 });

 Vue.use(Loading.directive);

 Vue.prototype.$ELEMENT = {
 size: opts.size || '',
 zIndex: opts.zIndex || 2000
 };

 Vue.prototype.$loading = Loading.service;
 // ...
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 version: '2.7.0',
 locale: locale.use,
 i18n: locale.i18n,
 install,
 CollapseTransition,
 Loading,
 Pagination,
 // ... 這里省略大部分組件
 TimelineItem
};

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",

lib
├── index.js     # umd 總文件

// build/webpack.conf.js

// ...忽略

module.exports = {
 mode: 'production',
 // 指定入口文件src/index.js，該入口文件由`build:file`腳本自動生成
 entry: {
 app: ['./src/index.js']
 },
 output: {
 // 在lib文件中生成
 path: path.resolve(process.cwd(), './lib'),
 // 生成lib/index.js
 filename: 'index.js',
 // 生成umd模塊
 libraryTarget: 'umd',
 // src/index.js文件采用export default語法拋出，因此需要設置libraryExport
 // 否則引入的UI組件庫需要使用.default才能引用到拋出的對象
 // if your entry has a default export of `MyDefaultModule`
 // var MyDefaultModule = _entry_return_.default;
 // 這里踩過坑，所以說明一下，不配置的話遇到的問題是引入的UI組件庫沒法解構
 libraryExport: 'default',
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
	// 'element-ui': path.resolve(__dirname, '../')
	// alias中的'element-ui'作為npm包拋出后指向了業(yè)務項目node_modules所在的npm包路徑
 alias: config.alias
 },
 externals: {
 // 構建只排除vue
 // umd模塊通過CDN形式引入，因此將所有的組件、utils、i18n等構建在內
 // umd模塊沒有按需引入功能
 vue: config.vue
 },
 // ...忽略
};

lib
├── element-ui.common.js 		# commonjs2 總文件 

// build/webpack.common.js

// ...忽略

module.exports = {
 mode: 'production',
 entry: {
 app: ['./src/index.js']
 },
 output: {
 path: path.resolve(process.cwd(), './lib'),
 publicPath: '/dist/',
 filename: 'element-ui.common.js',
 chunkFilename: '[id].js',
 libraryExport: 'default',
 library: 'ELEMENT',
 // 生成commonjs2模塊
 libraryTarget: 'commonjs2'
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
	// 'element-ui': path.resolve(__dirname, '../')
 alias: config.alias,
 modules: ['node_modules']
 },
 // 這里用于排除UI組件、支持國際化、utils方法的源代碼，這些源代碼需要額外的腳本進行構建
 externals: config.externals,
 optimization: {
 // commonjs2無須壓縮處理
 minimize: false
 },
 // ...忽略
};

[{ 
 vue: 'vue',
 // 排除所有UI組件的源代碼
 'element-ui/packages/option'：'element-ui/lib/option',
 // ...
 // 排除國際化的源代碼
 'element-ui/src/locale': 'element-ui/lib/locale',
 // 排除utils方法的源代碼
 'element-ui/src/utils/vue-popper': 'element-ui/lib/utils/vue-popper',
 'element-ui/src/mixins/emitter': 'element-ui/lib/mixins/emitter',
 'element-ui/src/transitions/collapse-transition': 'element-ui/lib/transitions/collapse-transition' 
 // ...
 },
 // var nodeExternals = require('webpack-node-externals');
 // nodeExternals()
 [Function] 
];

// pagination組件中需要用到option組件
import ElOption from 'element-ui/packages/option';
// ...

// lib/element-ui.common.js
module.exports = require("element-ui/lib/option");

// 排除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系統(tǒng)構建的包也會有一個該功能的依賴）
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");

lib
├── alert.js     # commonjs 組件
├── aside.js
├── button.js
├── ...

// ...忽略
const Components = require('../components.json');

// Components是所有組件的構建入口列表
// {
// "pagination": "./packages/pagination/index.js",
// ...
// "timeline-item": "./packages/timeline-item/index.js"
// }


const webpackConfig = {
 mode: 'production',
 // 多入口
 entry: Components,
 output: {
 path: path.resolve(process.cwd(), './lib'),
 publicPath: '/dist/',
 filename: '[name].js',
 chunkFilename: '[id].js',
 libraryTarget: 'commonjs2'
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: config.alias,
 modules: ['node_modules']
 },
 // 排除其他UI組件、支持國際化、utils的源碼，這些源碼會額外構建
 externals: config.externals,
 },
 // ...忽略
};

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",

lib
├── directives     # commonjs 指令
├── locale      # commonjs 國際化API和語言包
├── mixins  		# commonjs 混入
├── transitions			# commonjs 過度動畫
├── utils      # commonjs 工具方法

{
 "presets": [
 [
  "env",
  {
  "loose": true,
  "modules": false,
  "targets": {
   "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
  }
 ],
 "stage-2"
 ],
 "plugins": ["transform-vue-jsx"],
 "env": {
 // cross-env BABEL_ENV=utils
 "utils": {
  "presets": [
  [
   "env",
   {
   // 松散模式，更像人手寫的ES5代碼
   "loose": true,
   // es6轉成commonjs
   "modules": "commonjs",
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
   }
  ],
  ],
  "plugins": [
  ["module-resolver", {
   "root": ["element-ui"],
   "alias": {
   // 類似于Webpack的externals功能
   // 將源代碼的引入路徑更改成目標代碼的引入路徑
   "element-ui/src": "element-ui/lib"
   }
  }]
  ]
 },
 "test": {
  "plugins": ["istanbul"]
 }
 }
}

lib
├── theme-chalk 		# css 樣式文件
│ ├── fonts     # icons
│ ├── alert.css    # 按需引入的組件樣式
│ ├── ...      # 按需引入的組件樣式
│ └── index.css    # 完整引入樣式

'use strict';

const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

function compile() {
 return src('./src/*.scss')
 // sass轉化成css
 .pipe(sass.sync())
 // Parse CSS and add vendor prefixes to rules by Can I Use 
 // css瀏覽器兼容處理
 .pipe(autoprefixer({
  browsers: ['ie > 9', 'last 2 versions'],
  cascade: false
 }))
 // 壓縮css
 .pipe(cssmin())
 .pipe(dest('./lib'));
}

function copyfont() {
 return src('./src/fonts/**')
 .pipe(cssmin())
 .pipe(dest('./lib/fonts'));
}

exports.build = series(compile, copyfont);

{
 "useConfigFiles": true,
 "router": true,
 "routerHistoryMode": true,
 "vuex": false,
 "cssPreprocessor": "less",
 // MAC OS X下生效，Windows下不生效，具體未深入研究
 "packageManager": "yarn",
 "plugins": {
 "@vue/cli-plugin-babel": {},
 "@vue/cli-plugin-eslint": {
  "lintOn": ["save", "commit"]
 },
 "@ziyi2/vue-cli-plugin-ui-base": {},
 "@ziyi2/vue-cli-plugin-ui-cz": {},
 "@ziyi2/vue-cli-plugin-ui-lint": {}
 }
}

// 可能獲取會有點慢，大家耐心等待
vue create --preset ziyi2/vue-cli3-lerna-ui my-project

vue create --preset preset.json my-project

// 啟動開發(fā)服務
"serve": "vue-cli-service serve",
// 生成靜態(tài)資源
"build": "vue-cli-service build",
// Eslint校驗
"lint": "vue-cli-service lint",
// 安裝和鏈接Lerna repo的依賴
"bootstrap": "lerna bootstrap",
// 更新升級日志
"cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
// 構建
"lib": "lerna run lib"

lerna bootstrap

.
├── packages     		# workspaces
│ ├── alert    		# 警告（不構建）
│ │  ├── alert.vue  		# 組件源碼
│ │  ├── index.js  		# npm包入口文件
│ │  └── package.json 		# npm包描述文件
│ ├── btn     		# 按鈕
│ │  ├── lib  	  		# 目標文件
│ │  │ └── lib.common.js	# npm包入口文件
│ │  ├── btn.vue  		# 組件源碼
│ │  ├── index.js  		# 構建入口文件
│ │  ├── package.json 		# npm包描述文件(需要vue cli的開發(fā)態(tài)依賴)
│ │  └── vue.config.js 		# 構建配置文件
│ ├── locale    		# 國際化
│ │  ├── lang  	  	# 語言包
│ │  │ ├── enjs 		# 英文
│ │  │ └── zh_CN.js		# 中文
│ │  ├── mixins  		# 各個組件調用的國際化API
│ │  ├── src  		# 源碼
│ │  ├── index.js  		# npm包入口文件
│ │  ├── alert.vue  		# 組件源碼
│ │  ├── index.js  		# npm包入口文件
│ │  └── package.json 		# npm包描述文件
│ ├── select    		# 選擇器(類似于alert)
│ ├── theme    		# 樣式
│ │  ├── lib  	  		# 目標文件
│ │  │ ├── alert.css 		# 警告樣式
│ │  │ ├── btn.css 		# 按鈕樣式
│ │  │ ├── index.css 		# 總體樣式
│ │  │ └── select.css		# 選擇器樣式
│ │  ├── src  	  		# 源文件
│ │  │ ├── utils 		# 通用方法和變量
│ │  │ ├── alert.less		# 警告樣式
│ │  │ ├── btn.less 		# 按鈕樣式
│ │  │ ├── index.less 	# 總體樣式
│ │  │ └── select.less		# 選擇器樣式
│ │  ├── gulpfile.js  	 	# 構建配置文件
│ │  └── package.json 		# npm包描述文件
│ └── utils    		# 工具方法
│   ├── lib  		# 目標文件（這里也可以采用lodash的方式，去掉lib文件夾這一層）
│   ├── src  		# 源文件
│   ├── babel.config.js		# 構建配置文件
│   └── package.json 		# npm包描述文件
├── public     		# 公共資源目錄
├── src      		# 開發(fā)態(tài)目錄
├── .browserslistrc     	# UI框架目標瀏覽器配置
├── .cz-config.js      	# cz定制化提交說明配置
├── .gitignore      	# git忽略配置
├── .lintstagedrc			# lint-staged配置
├── babel.config.js			# vue cli的babel配置
├── lerna.json				# lerna配置
├── package.json			# vue cli容器描述文件（容器不是npm包）
├── postcss.config.js			# postcss配置
├── README.md				# 說明
└── vue.common.js			# 通用的組件構建配置文件