Element-UI（2.11.1）构建流程

文章较长，建议收藏方便再看

Element是如何设计目录？各目录职能都是什么？
Element是如何利用webpack、nodejs搭建组件构建环境、构建工具？
Element是如何打包样式的？
Element是如何实现全局引入、与按需引入的这两个功能的？
主流的组件库说明都是用markDown写的，如何把md文档，编译成Vue组件？这方面E是如何配置的？
Element如何完成国际化的？
如果是二次封装，怎么在Element的架构上，新建一个组件？

如果你对上面存在问题存在疑问，或者下面的内容，可以帮助到你一点点。

目录分析

最外层目录

├─build // 构建相关的nodejs脚本和webapck配置
├─examples // 展示Element组件的官网项目
├─lib // 打包出来的文件，发布到npm包
├─packages // 组件代码
├─src //  组件代码公共方法
├─test // 测试代码
├─Makefile // 构建工具文件
├─components.json // 组件列表
└─package.json // 记录项目依赖包、script脚本

components.json

先了解一下最简单的components.json

这个文件记录了你所有组件的路径关系，最终以key,value的形式保存在这个文件中，方便后续导出，批量操作组件

我们可以在很多地方应用了这个文件去参与Webpack、nodejs脚本的自动化构建流程，比如自动生成文件、自动生成多入口等等。。

// 为了不增加文章长度，只截取关键部分，完整请看源码
{
  "pagination": "./packages/pagination/index.js",
  "dialog": "./packages/dialog/index.js",
  "autocomplete": "./packages/autocomplete/index.js",
  "dropdown": "./packages/dropdown/index.js",
  "dropdown-menu": "./packages/dropdown-menu/index.js",
  "dropdown-item": "./packages/dropdown-item/index.js",
  "menu": "./packages/menu/index.js",
  "submenu": "./packages/submenu/index.js",
  "menu-item": "./packages/menu-item/index.js",
  "menu-item-group": "./packages/menu-item-group/index.js",
  "input": "./packages/input/index.js",
  "input-number": "./packages/input-number/index.js",
  "radio": "./packages/radio/index.js",
  "radio-group": "./packages/radio-group/index.js",
  "radio-button": "./packages/radio-button/index.js",
  "checkbox": "./packages/checkbox/index.js",
}

一个组件库，最重要的是组件库的源码。

ElementUI的组件库源码主要存在于packages、src两个目录下面。

Packages文件夹

// packages文件夹 每个组件都有自己的文件夹
// 为了不增加文章长度，只截取关键部分，完整请看源码
├── alert
├── aside
├── button
├── button-group
├── calendar
├── checkbox
├── form
├── table
├── theme-chalk // 组件的样式都在这里 index.scss 里面包含了所有的样式文件

Button文件夹

packages下，每个组件都是用一个独立的文件夹去管理

. // packages/button文件夹
├── index.js // 组件入口文件
└── src
    ├── button-group.vue // button-group源码
    └── button.vue // button源码

// packages/button/index.js
// 引入组件button组件
import ElButtonfrom './src/button';

// 为组件提供install方法，让Vue可以通过Vue.use(Button)形式去使用
ElButton.install = function(Vue) {
  Vue.component(ElButton.name, ElButton);
};

export default ElButton;

theme-chalk 文件夹

theme-chalk文件夹是用来管理所有组件的样式的，文件夹大致结构如下：

// 为了不增加文章长度，只截取关键部分，完整请看源码
├── packages // 组件入口文件
└── theme-chalk
    ├── alert.scss // alert组件的样式
    └── button.scss // button组件的样式
    └── aside.scss
    └── checkbox.scss
    └── index.scss // 该文件引入了所有样式，是总的样式入口文件
    └── gulpfile.js // 样式的编译、压缩、输出是通过gulp工作流来完成的

这里比较有趣的是，可以看到Element对样式的打包、编译、处理、输入，是通过gulp来完成的，而不是Webpack。

另外还有一个比较流行的组件库IView，也是通过这种gulp工作流的形式去处理的样式

Src文件夹

packages是把每个组件单独分开去管理的

Src的作用就是，把packages的所有公共方法、自定义指令、组件国际化都放在这里

每种不同类型的公共方法的，都存在不同的文件夹中

// src目录
├── directives // 项目封装好的Vue自定义指令
├── index.js // 组件的整体入口文件
├── locale // 组件的国际化内容
├── mixins // 一些组件的mixins
├── transitions // 动画的封装
└── utils // 工具函数集合

这里，我们重点关注一下index.js

// 为了不增加文章长度，只截取关键部分，完整请看源码

/* Automatically generated by './build/bin/build-entry.js' */

// 1、导入了所有组件packages下的所有组件
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
];

// 2、提供了install方法，帮我们挂载了一些组件与变量
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 把所有的组件注册到Vue上面
  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;

};

// 导出install方法，可以理解为一个插件、以及一些功能比如国际化功能
export default {
  install,
  locale
};

在这个文档中，我们可以看到这个文件的最开头有这么一句话:

Automatically generated by './build/bin/build-entry.js'

可以知道这是通过build-entry脚本去生成的，后续我们看项目的构建脚本的时候会简单分析如何实现，这里简单了解一下即可。

另外这个自动生成的index.js文件，主要的实现的功能是以下三点：

导入了所有组件packages下的所有组件
对外暴露了install方法，让使用者通过Vue.use去使用的时候，自动执行一些自定义操作，比如挂载$loading、$Msgbox等变量
导出install方法、一些公共的变量

最后，因为这里因为引入了所有的组件源码，所以这也是一个Webpack的打包的入口文件，在看webpack配置的时候会具体说。

examples目录

Examples，相当于一个独立的Vue项目，主要的功能是展示文档。

Element的官网展示的内容，就是在这个examples目录。

这里文件夹，我们介绍一下比较主要的文件

├── app.vue // 根组件
├── components // 项目公共组件
├── docs // 每一个页面的组件都存在在这
├── entry.js  // 项目入口
├── route.config.js // 路由配置,通过脚本自动生成而来

entry.js 项目入口文件

我们可以看到这个文件中

通过这代码import Element from 'main/index.js'，把之前所有写的组件js都引入了进来。

这里配置了Webpack的alias，main/index.js，其实就是我们上面提到的src/index.js文件

另外还引入了全局的css import 'packages/theme-chalk/src/index.scss';

import Vue from 'vue';
import entry from './app';
import VueRouter from 'vue-router';
import Element from 'main/index.js';
import hljs from 'highlight.js';
import routes from './route.config';
import demoBlock from './components/demo-block';
import MainFooter from './components/footer';
import MainHeader from './components/header';
import SideNav from './components/side-nav';
import FooterNav from './components/footer-nav';
import title from './i18n/title';

import 'packages/theme-chalk/src/index.scss';
import './demo-styles/index.scss';
import './assets/styles/common.css';
import './assets/styles/fonts/style.css';
import icon from './icon.json';

Vue.use(Element);
Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('main-footer', MainFooter);
Vue.component('main-header', MainHeader);
Vue.component('side-nav', SideNav);
Vue.component('footer-nav', FooterNav);

const globalEle = new Vue({
  data: { $isEle: false } // 是否 ele 用户
});

Vue.mixin({
  computed: {
    $isEle: {
      get: () => (globalEle.$data.$isEle),
      set: (data) => {globalEle.$data.$isEle = data;}
    }
  }
});

Vue.prototype.$icon = icon; // Icon 列表页用

console.log(routes);
const router = new VueRouter({
  mode: 'hash',
  base: __dirname,
  routes
});

router.afterEach(route => {
  // https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186
  Vue.nextTick(() => {
    const blocks = document.querySelectorAll('pre code:not(.hljs)');
    Array.prototype.forEach.call(blocks, hljs.highlightBlock);
  });
  const data = title[route.meta.lang];
  for (let val in data) {
    if (new RegExp('^' + val, 'g').test(route.name)) {
      document.title = data[val];
      return;
    }
  }
  document.title = 'Element';
  ga('send', 'event', 'PageView', route.name);
});

new Vue({ // eslint-disable-line
  ...entry,
  router
}).$mount('#app');

docs文件夹

Element官网支持4种语言，docs一共有4个文件夹，每个文件夹里面的内容基本是一样的，只是根据语言不同，翻译一下。

这里我们重点关注zh-CN文件下的中文文档

我们可以看到里面全部都是md文档，而每一个md文档，分别对应着其官网的展示页面

用markdown文档编写展示文档，其实这是各大组件库写展示文档的一个主流方式

但是用这种文档展示，需要我们去克服一个技术上的难题：

如何把md文档上写的Vue代码，编译成Vue组件呢？

这里我们先把问题抛出来，不作回答，让大家带着问题看下去。

我们先看button.md，就是官网展示Button组件的时候显示的内容

该文件里其实就是一些普通的md语法。

我们聚焦到上图中，红色圈圈里的代码

它是用了特定的标识符给包裹起来，比如:::demo、:::就把一些Vue组件的代码给包裹起来

:::demo

\```html

这里面的内容有两个作用：

1、以Vue组件的形式展现出来

2、以md的形式展现出来

\```

:::

为什么要同:::demo这样的标识符去给代码包裹起来呢？

其实是因为，Element要把demo标识符里面的代码给单独提取出去，去给Vue-loader处理，从而生成Vue组件。

那么具体实施思路是怎样的呢？

在说这个之前，先复习一下Webpack中的loaders相关的三个知识：

loaders的执行顺序是，从下到上、从右到左的
前一个loaders执行的结果，会返回到下一个loaders中
Vue-loader可以帮我们把SFC规范的语法，编译成Vue组件

这个功能的实现，底层就是Element自己编写了一个loader，把里面的内容抽出来，然后传给vue-loader去编译。

我们先看看其webpack配置

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          },
          {
            loader: path.resolve(__dirname, './md-loader/index.js')
          }
        ]
      }
    ]
  }

可以看到，当遇到*.md文档的时候

首先会用./md-loader/index.js,去处理。

然后把处理的结果，再传给vue-loader.

最终Vue-loader就帮我们编译成Vue组件

那么./md-loader/index.js做了什么呢？

总结来说，就是这个loader最终返回的是一段字符串

这段字符串就是符合Vue SFC 规范的字符串

那么这一串字符串，就可以被vue-loader去编译，为我们生成Vue组件。

所以一个一个单独的md文档，通过路由+webpack的配置，其实跟一个个单独的Vue组件是差不多的，但是同时却提供了我们写md文档的方便

当我们跑起来项目的时候，修改这里的md文档，是会实时更新的。

我们试试题目修改成 Ynet-button，那么在官方就可以看到

package.json

其实很多人都说，如果要理解一个项目的概要，首先要看的就是package.json

它记录了项目的依赖以及脚本，让你理解项目的一些主要功能点，我们来看看它的大概样式

// 为了不增加文章长度，只截取关键部分，完整请看源码
{
  "name": "element-ui",
  "version": "2.11.1",
  "description": "A Component Library for Vue.js.",
  // 发包上去后，项目的入口文件 
  // import Element from 'element-ui' 时候引入的就是main中的文件
  "main": "lib/element-ui.common.js",// element-ui.common.js是commonsjs规范 lib/index.js是umd规范
 // 当你npm publish 发包的时候，发什么到Npm上，由files决定，功能和.gitignore类似
  "script": {}, // webpack配置，nodejs脚本，这部分单独在下文中介绍
  "files": [
    "lib",
    "src",
    "packages",
    "types"
  ],
  // TypeScript 入口文件
  "typings": "types/index.d.ts",
  // 仓库信息
  "repository": {
    "type": "git",
    "url": "git@github.com:ElemeFE/element.git"
  },
  // 项目主页的URL地址
  "homepage": "http://element.eleme.io",
  "keywords": [
    "eleme",
    "vue",
    "components"
  ],
  // 使用MIT协议,具体见参考资料
  "license": "MIT",
  // 提issuse、bugs的地方
  "bugs": {
    "url": "https://github.com/ElemeFE/element/issues"
  },
  // unpkg.com是一个源自 npm 的全球快速 CDN
  // 如果通过unpkg.com这种CDN方式引入库的话，默认文件路径
  // 官方文档在CDN引入的时候有提 https://element.eleme.cn/#/zh-CN/component/installation
  // lib/index.js是umd规范，由webpack.conf.js生成
  "unpkg": "lib/index.js",
  // 声明当前模块包含 style 部分，并指定入口文件。
  "style": "lib/theme-chalk/index.css",
  "dependencies": {
  },
  // 解决模块之间相互依赖的问题，具体见参考资料
  "peerDependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
  }
}

script脚本汇总

package.json中，script脚本的理解对我来说难度是比较大的，所以这里单独拎出来去说。

{
"scripts": {
  // 安装依赖，官方推荐优先用yarn
    "bootstrap": "yarn || npm i",
  // build/bin/iconInit.js 解析icon.scss。把所有的icon的名字放在icon.json里。最后挂到Vue原型上的$icon的上，方便循环出来.具体使用见【补充资料】
  // build/bin/build-entry.js 根据components.json，生成src/index.js文件，核心就是json-templater/string插件的使用【插件使用见参考资料】
  // build/bin/i18n.js 根据examples/i18n/page.json和模板，生成不同语言的demo
	//  build/bin/version.js 根据package.json中的versions,生成examples/versions.json
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
  // build/bin/gen-cssfile // 根据components.json，生成生成package/theme-chalk/index.scss
  // gulp build --gulpfile packages/theme-chalk/gulpfile.js 用gulp构建工具，编译scss、压缩、输出css
  // cp-cli 是一个跨平台的copy工具，和CopyWebpackPlugin类似、linux的cp差不多（不具有跨平台的功能），
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
  // 把src目录下的除了index.js入口文件外的其他文件通过babel转译，然后移动到lib文件夹下。
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
// 跑起来demo
    "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",
 // 整体构建,打包出lib库
    "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",      
  // 生成umd模块的语言包
    "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 bui
  // 对项目进行eslint检测
    "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",

Script 脚本的进一步剖析

npm run bootstrap` 安装依赖,推荐优先用yarn

npm run build:file ` 用脚本自动化生成一些文件

该命令跑了4个任务

`node build/bin/iconInit.js`  // 解析icon.scss。把所有的icon的名字放在icon.json里。最后挂到Vue原型上的$icon的上
& `node build/bin/build-entry.js` // 根据components.json，生成src/index.js文件，核心就是json-templater/string插件的使用【插件使用见参考资料】
& `node build/bin/i18n.js` // 根据examples/i18n/page.json和模板，生成不同语言的demo,当选择语言不一样，会跑不同语言的文件夹。
& `node build/bin/version.js` // 根据package.json中的versions,生成examples/versions.json，然后在header中获取这个versions.json来使用

iconInit.js

这文件是为了把icon.scss里面所有的icon名字，抽离出来，然后存放在 examples/icon.json文件上。

可是Element为什么要把icon的名字提取出来呢?

我们看一下，最终展示在官网上的demo就知道了

因为Element中Icon有太多了，一个一个去写就太蠢了，所以才把所有icon都存在一个数组里，然后通过v-for循环出来

icon.json

这个文件，我们可以看到最终抽离出来的效果

最后使用，我们可以看到入口文件entry.js、与icon.md中看到作者这么做的最终使用情况

// entry.js
import Vue from 'vue';
import icon from './icon.json';
Vue.prototype.$icon = icon; // Icon 列表页用
------------------------------------------------------------------

// icon.md
### 图标集合
<ul class="icon-list">
  // 直接把所有的icon循环出来
  <li v-for="name in $icon" :key="name">
    <span>
      <i :class="'el-icon-' + name"></i>
      <span class="icon-name">{{'el-icon-' + name}}</span>
    </span>
  </li>
</ul>

build-entry.js

在上面介绍src/index.js的时候，我们知道index.js文件，是通过这个脚本去自动化构建生成的，它到底是如何实现的呢？

这里我们结合源码来看：

// 把所有组件的依赖关系，引入进来
var Components = require('../../components.json');
var fs = require('fs');

// https://www.npmjs.com/package/json-templater 可以让string与变量结合，输出一些内容
var render = require('json-templater/string');

// https://github.com/SamVerschueren/uppercamelcase  转化为驼峰 foo-bar >> FooBar
var uppercamelcase = require('uppercamelcase');

var path = require('path');

var endOfLine = require('os').EOL;// os.EOL属性是一个常量，返回当前操作系统的换行符（Windows系统是\r\n，其他系统是\n）

// 生成文件的名字和路径
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 => {
  // menu-item 转化为 MenuItem
  var componentName = uppercamelcase(name);
  // IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
  }));
  // 得到的数据结构是: includeComponentTemplate = ['import MenuItem from \'../packages/menu-item/index.js\';', ....]

  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
    // INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
      name: componentName,
      component: name
    }));
  }
  // 得到的数据结构是: installTemplate = ['Pagination', 'Dialog', ...]

  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
});

// 这里如果理解include、install、version、list分别代表什么，下面的代码就容易理解了
// 其实就是用json-templater库，把 MAIN_TEMPLATE 中的字符串，和include、install、version、list这些变量结合出来，最终的样式就是src/index.js的样式
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)
});

// 结果输出到src/index.js中
fs.writeFileSync(OUTPUT_PATH, template);

大概实现逻辑就是，根据components.json，生成src/index.js文件

核心就是json-templater/string插件的使用【插件使用见参考资料】

build/bin/i18n.js

Element项目的国际化，分为两个部分，分别用两种不同的方式去处理。

第一部分是，官网的Demo展示国际化

第二部分是，组件源码国际化

而build/bin/i18n.js是帮我们完成第一部分的国际化工作的

第一部分：Element的展示的官网是如何实现国际化的

首先官网的主页(index)页面的国际化，是以examples/pages/template为公共的模板，再genuine不同的语言，分别生成不同的文件

我们可以看看template里有什么

里面是一个个.tpl文件，每一个文件都是一个模板

而每个tpl文件，都是符合SFC规范的的Vue文件格式。

在tpl文件中，需要国际化的地方，会根据一定的格式，用数字标识出来

// guide.tpl
<script>
  export default {
    data() {
      return {
        lang: this.$route.meta.lang,
        navsData: [
          {
            path: '/design',
            name: '<%= 1 >' // 国际化标志位
          },
          {
            path: '/nav',
            name: '<%= 2 >'// 国际化标志位
          }
        ]
      };
    }
  };
</script>

然后根据不同的语言，把examples/i18n/page.json(这个文件包含首页所有的国际化字段)里，提前写好的字段，按照标志位填充进去

最终生成的这一套组件，组合起来就是就是Element展示的首页

这个首页是支持多语言的，每一种语言都有对应的一个vue文件。

那么它是如何做到不同的语言，有不同的vue文件呢？

build/bin/i18n.js，就是帮我们完成这个事项。

大概的工作流程就是，引入examples/i18n/page.json,然后循环，根据不同的数据结构

把tpl文件的标志标志位，通过正则匹配出来，并替换成自己预先设定好的字段

// 把标志位地方的字段，替换成page.json里预先写好的字段
content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
// 最后再输出
fs.writeFileSync(outputPath, content);

最终看到的结果就是examples里面的内容

这样就完成了官网首页的国际化，那么markdown文档的国际化呢？

我的答案是，自己翻译的，这部分是没有用自动化流程去构建，只是用脚本为我们生成一个空的md文档，内容由我们自己去编写。（如果错了，请指正）

第二部分：组件源码的国际化

在 packages/color-picker/src/components/picker-dropdown.vue 中，我们在模板部分可以看到这个语言包的使用：

<el-button
  size="mini"
  type="text"
  class="el-color-dropdown__link-btn"
  @click="$emit('clear')">
  {{ t('el.colorpicker.clear') }}
</el-button>
<el-button
  plain
  size="mini"
  class="el-color-dropdown__btn"
  @click="confirmValue">
  {{ t('el.colorpicker.confirm') }}
</el-button>

这个t('el.colorpicker.clear')返回的是什么内容呢？

我们再src/locale/lang下面可以看到

export default {
  el: {
    colorpicker: {
      confirm: '确定',
      clear: '清空'
    },
  }

所以t函数，实际上会根据你的语言，去获取不同的语言包，然后再去加载去对于的字段出来，这一点跟普通项目的国际化没什么区别。

但是Element是如何取构建t函数的呢？是通过什么手段帮t绑定到Vue上面呢

这部分的操作是在src/locale/lang/index.js完成的

如果你没有设置语言包，在index.js里面就会默认使用中文

npm run build:theme

这个命令帮我们跑了3个命令

`node build/bin/gen-cssfile` // 根据components.json，生成生成package/theme-chalk/index.scss，把所有组件的样式都导入到index.scss
&& `gulp build --gulpfile packages/theme-chalk/gulpfile.js` // 用gulp构建工具，编译scss、压缩、输出css
&& `cp-cli packages/theme-chalk/lib lib/theme-chalk` //cp-cli 是一个跨平台的copy工具，和CopyWebpackPlugin类似、linux的cp差不多（不具有跨平台的功能） 把文件复制到lib/theme-chalk下

首先我们知道ElemntUI在使用的时候，是提供2种方式的。

一种是全局引入、一种是按需引入。

所以在样式的处理上，也有要两种处理方法，分别用于全局引入、按需引入的。

我们先看看两种引入方式的具体使用：

全局引入

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)
});

按需引入

import Vue from 'vue';
import { Button, Select } from 'element-ui';
// 上面这句会通过babel-plugin-component插件编译为
// var button = require('element-ui/lib/button')
// require('element-ui/lib/theme-chalk/button.css')
// 如何转义请看配置 https://element.eleme.cn/#/zh-CN/component/quickstart
import App from './App.vue';

Vue.use(Button)
Vue.use(Select)

new Vue({
  el: '#app',
  render: h => h(App)
});

gulpfile.js 实现样式打包

既然有两种引入方式，那么Element在打包组件的样式，就必须打包两种方案。

还记得我们上面介绍的packages/theme-chalk吗？

其实只要把packages/theme-chalk下的所有scss都编译成css就可以了

当你需要全局引入的时候，就去引入index.scss文件，这样所有组件的样式都齐全了。

如果你想按需引入，比如按需引入button组件，那么只要引入button.scss文件，就可以了。

那么如何把packages/theme-chalk下的所有scss都编译成css？（Element是如何打包样式的？）

这一点webpack不容易办到(鉴于我使用webpack的渣渣经验，我没想到该如何用webpack去实现会比较优雅，如果小伙伴知道，欢迎分享)，但是gulp却很容易

所以ElementUI的样式打包，并不是用webpack的，是用了gulp，基于工作流去处理样式。

我们看看Element如何结合gulp去使用

'use strict';

const { series, src, dest } = require('gulp');
const sass = require('gulp-sass'); // 编译gulp工具
const autoprefixer = require('gulp-autoprefixer');// 添加厂商名字工具
const cssmin = require('gulp-cssmin'); // 压缩css工具

function compile() {
  return src('./src/*.scss') // 引入src下所有的scss样式
    .pipe(sass.sync()) // 把scss文件编译成css
    .pipe(autoprefixer({ // 基于目标浏览器版本，添加厂商前缀
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    }))
    .pipe(cssmin()) // 压缩css
    .pipe(dest('./lib')); // 输出到lib下
}

function copyfont() {
  return src('./src/fonts/**') // 读取src/fonts下的所有文件
    .pipe(cssmin()) // 压缩
    .pipe(dest('./lib/fonts')); // 输出到lib/fonts下
}

exports.build = series(compile, copyfont);

最终就会帮我们打包出了样式文件。

gen-cssfile.js

根据components.json，生成生成package/theme-chalk/index.scss，把所有组件的样式都导入到index.scss

这样每次新增组件，就不用手动去引入新增组建的样式了

cp-cli packages/theme-chalk/lib lib/theme-chalk

cp-cli 是一个跨平台的copy工具，和CopyWebpackPlugin类似、linux的cp差不多（不具有跨平台的功能）把文件复制到lib/theme-chalk下

Webpack配置

我们可以看到E的webpack配置主要要由下面5中配置去分工

webpack.common.js

生成commonjs2规范的入口文件 /lib/element-ui.common.js，用于import的方法引入

webpack.component.js

把各组件以commonjs规范单独打包出来，提供按需引入的功能

webpack.conf.js

生成umd规范的入口文件/lib/index.js，用于CDN方法引入

webpack.test.js

webpack.test.js 跑单元测试的，这里我们忽略。

webpack.demo.js

用于跑Element官网的基础配置

makeFile

Element中还用了makefile为我们编写了一些额外的脚本

当我们在命令行中输入 make时，可以看到

这是已经帮我们编写好的脚本

这里重点说一下 make new <component-name> [中文] 这个命令

这是用来创建一个新的组件的，然后这个命令会帮我们基于新建好的组件，帮我们进行一系列的自动化操作

当运行这个命令的时候，其实运行的是 node build/bin/new.js

new.js脚本主要做了下面几件事：

把你新建的组件添加到 components.json
添加到 index.scss
添加到 element-ui.d.ts
创建 package
添加到 nav.config.json

所以当我们要在Elment架构上，新建一个elect-bill组件

只要执行 make new elect-bill 电子账号，然后不用配置，就可以直接去开发了

补充资料

MIT协议

Element-UI（2.11.1）构建流程

目录分析

最外层目录

components.json

Packages目录、src目录

Packages文件夹

Button文件夹

theme-chalk 文件夹

Src文件夹

examples目录

entry.js 项目入口文件

docs文件夹

package.json

script脚本汇总

Script 脚本的进一步剖析

npm run bootstrap` 安装依赖,推荐优先用yarn

npm run build:file ` 用脚本自动化生成一些文件

npm run build:theme

gen-cssfile.js

cp-cli packages/theme-chalk/lib lib/theme-chalk

Webpack配置

makeFile

补充资料

参考链接

Element-UI（2.11.1） 构建流程

目录分析

最外层目录

components.json

Packages目录、src目录

Packages文件夹

Button文件夹

theme-chalk 文件夹

Src文件夹

examples目录

entry.js 项目入口文件

docs文件夹

package.json

script脚本汇总

Script 脚本的进一步剖析

npm run bootstrap` 安装依赖,推荐优先用yarn

npm run build:file ` 用脚本自动化生成一些文件

npm run build:theme

gen-cssfile.js

cp-cli packages/theme-chalk/lib lib/theme-chalk

Webpack配置

makeFile

补充资料

参考链接

Element-UI（2.11.1）构建流程