build-entry.js

这个文件是整个工程构建的核心,它的使用场景是在 package.json 中,执行 build:file时所需要的。

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"

而这个 build:file命令,会在 deploy:build, dev, dev:playdist 中被引用。 顾名思义,这个命令是用来构建文件的,首先是 icon 的初始化,然后是所有组件的构建,然后是国际化Element,然后是版本。

所以这个文件里的东西要好好研读。

首先 require 了一些依赖:

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;

这里面要说的是这个 json-templaterjson-templater - npm,这个工具能够进行 mustache 模板的替换,比如说该文件代码里引用的 json-templater/string 的使用方法:

var render = require('json-templater/string');
render('{{xfoo}} {{say.what}}', { xfoo: 'yep', say: { what: 'yep' } });
// yep yep

这样后面遇到就明白做了些什么了。

然后定义了一些常量:

var OUTPUT_PATH = path.join(__dirname, '../../src/index.js'); // 此文件最终输出的路径
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';'; // 引入组件的模板
var INSTALL_COMPONENT_TEMPLATE = '  {{name}}'; // install 组件的模板
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.map(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;
  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);
}

module.exports = {
  version: '{{version}}',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
{{list}}
};

module.exports.default = module.exports;
`; //主模板

然后又做了一些处理和变量的初始化:

delete Components.font; //这里删除了 font,可是我在文件中没有找到这个模块,不知道是否是遗留代码

var ComponentNames = Object.keys(Components); // 把组件名称提取出来组成一个数组

var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];

ComponentNames.forEach(name => {
  var componentName = uppercamelcase(name); // 把dropdown-item这种格式的都转成大写的驼峰式DropdownItem

  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
  })); // import {{name}} from \'../packages/{{package}}/index.js\'; 就会变成 import DropdownMenu from '../packages/dropdown-menu/index.js';

  if (['Loading', 'MessageBox', 'Notification', 'Message'].indexOf(componentName) === -1) {
    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
      name: componentName,
      component: name
    }));
  }

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

这里主要是解析 Components 里的组件,然后初始化 IMPORT_TEMPLATEINSTALL_COMPONENT_TEMPLATE 两个模板。这里用到了一个npm包 UpperCamelCaseuppercamelcase - npm

然后渲染 MAIN_TEMPLATE 这个主模板,最后再输出到指定路劲就可以了:

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

当构建完成,控制台会输出一句话:

[build entry] DONE: /Users/athena/code/element/src/index.js