一、目录结构

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 = {}) {
    <!-- 默认接受第一个参数vue实例，opts为Vue.use传进来的第二个参数 -->
  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组件哈。