一、目录结构
build：webpack等打包相关的文件
examples：官网示例等
packages：组件相关的核心代码
src/directives：封装的自定义指令
src/locale: 语言相关的
src/mixins：方式mixin相关的
src/transitions: 封装的相关动画
src/utils: 相关的工具函数
test：单元测试文件
types：ts相关的文件
二、使用配置
当我们在vue中使用element-ui的时候，一般会有如下代码：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 Element 的引入,需要注意的是css的文件需要单独引入。
我们知道vue的插件开发形式都是调用Vue.use()进行注册的，Vue.use()会调用传入对象的install方法。
所以当我们调用Vue.use(ElementUI)注册element-ui的时候，会调用ElementUI的install方法，那我们看看ElementUI.install做了什么呢？
ElementUI.install这个方法在src/index.js中
// 引入支持的组件
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
...
// 定义组件
const components = [
Pagination,
Dialog,
...
];
// 执行Vue.use(ElementUI)的调用的install方法
const install = function(Vue, opts = {}) {
locale.use(opts.locale);
locale.i18n(opts.i18n);
// 循环注册所有组件
components.forEach(component => {
Vue.component(component.name, component);
});
Vue.use(InfiniteScroll);
Vue.use(Loading.directive);
// 在vue的原型上添加方法
Vue.prototype.$ELEMENT = {
size: opts.size || '',
zIndex: opts.zIndex || 2000
};
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
// 暴露出去的对象
export default {
version: '2.14.1',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
...
};
所以，当注册ele的时候Vue.use(ElementUI)，会调用ElementUI暴露的install方法，install内部接受了Vue实例，且用Vue.component(component.name, component)全局注册了ele提供的所有组件。这样我们在项目里就可以使用ele提供的组件。
其实index.js这个文件，是ele在打包的时候自动生成的，下面我们来看下ele的自动化配置。
三、自动化配置
先看下package.json下的构建命令
"scripts": {
"bootstrap": "yarn || npm i",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:umd": "node build/bin/build-locale.js",
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
"dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
"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",
"i18n": "node build/bin/i18n.js",
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
},
我们以npm run dev为例看一下是如何进行构建的
首先当我们运行npm run dev 的时候，运行的命令如下
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
分解下命令
npm run bootstrap
npm run build:file
NODE_ENV=development
webpack-dev-server --config build/webpack.demo.js
node build/bin/template.js"
npm run bootstrap 即 yarn || npm i,帮我们安装了整个项目需要的依赖、
npm run build:file 如下
node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js
再次分解下
node build/bin/iconInit.js 实际上是node运行了这个脚本，那我们去看看这个脚本下写了什么。
var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
// 读取icon.scss文件
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];
// 循环遍历通过pstcss获取到的cssNode，获取到class
nodes.forEach((node) => {
var selector = node.selector || '';
var reg = new RegExp(/\.el-icon-([^:]+):before/);
var arr = selector.match(reg);
if (arr && arr[1]) {
classList.push(arr[1]);
}
});
classList.reverse(); // 希望按 css 文件顺序倒序排列
fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});
这个文件其实就是读取theme-chalk/src/icon.scss文件的class名，生成了一个数组，并将这个数组写入到examples/icon.json，这个文件会在渲染图标组件的时候用到
node build/bin/build-entry.js
这个文件代码如下
var Components = require('../../components.json');
var fs = require('fs');
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase');
var path = require('path');
var endOfLine = require('os').EOL;
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var INSTALL_COMPONENT_TEMPLATE = ' {{name}}';
var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
{{include}}
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
const components = [
{{install}},
CollapseTransition
];
const install = function(Vue, opts = {}) {
locale.use(opts.locale);
locale.i18n(opts.i18n);
components.forEach(component => {
Vue.component(component.name, component);
});
Vue.use(InfiniteScroll);
Vue.use(Loading.directive);
Vue.prototype.$ELEMENT = {
size: opts.size || '',
zIndex: opts.zIndex || 2000
};
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
version: '{{version}}',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
{{list}}
};
`;
delete Components.font;
var ComponentNames = Object.keys(Components);
var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];
ComponentNames.forEach(name => {
var componentName = uppercamelcase(name);
includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
name: componentName,
package: name
}));
if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
name: componentName,
component: name
}));
}
if (componentName !== 'Loading') listTemplate.push(` ${componentName}`);
});
var template = render(MAIN_TEMPLATE, {
include: includeComponentTemplate.join(endOfLine),
install: installTemplate.join(',' + endOfLine),
version: process.env.VERSION || require('../../package.json').version,
list: listTemplate.join(',' + endOfLine)
});
fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH);
这个文件主要是用来生成src/index.js文件的，首先读取了components.json（ele提供的所有组件的配置文件），读取配置后再结合json-templater/string，将其依赖注入到MAIN_TEMPLATE这个变量中，其中双大括号里面的就是变量，最终生成了index.js。
node build/bin/i18n.js & node build/bin/version.js
这两个文件也不难阅读，一个是用来根据page.json的语言生成不同语言版本的官网，一个用来动态生成版本号的。
那么整体梳理下来，整个过程就是，首先我们把代码clone下来，然后当我们输入npm run dev 运行项目的时候，会先去install装全部依赖，然后再初始化图标配置文件，动态生成index.js入口文件，根据语言动态生成官网模板，再生成选择版本号的配置文件。一切准备就绪后再运行webpack，配置文件为webpack.demo.js，生成不同语言的官网。
感觉整个过程全部执行脚本完成，还是很自动化的，值得学习。
至于其他运行方式得执行结果，大家可以自行根据配置解读，毕竟跟重要的是阅读如何写vue组件哈。