"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/build-entry.js

// build/bin/build-entry.js

var Components = require('../../components.json'); // {組件名：組件路徑} => {"pagination": "./packages/pagination/index.js"}
var fs = require('fs');
var render = require('json-templater/string'); // 引入 json 模版生成插件
var uppercamelcase = require('uppercamelcase'); // 駝峰
var path = require('path');
var endOfLine = require('os').EOL; // node內(nèi)置模塊（操作系統(tǒng)）

// 導(dǎo)出路徑
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');

// 導(dǎo)入template、安裝組件template、主要template
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 = [];

// 遍歷組件名解析template
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}`);
});

// 主要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)
});

// 導(dǎo)出文件
fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH);

為了增加可維護(hù)性，自動(dòng)構(gòu)建入口文件，未來如果需要新增組件，就不用頻繁改動(dòng)入口文件。

os.EOL

一、看看 json-templater/string 是啥

1. 先搭建環(huán)境

$ npm init -y && npm i -D webpack webpack-cli json-template && touch index.js

2. index.js 文件內(nèi)容：

const render = require('json-templater/string');
const IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';

parseStrTemplate = render(IMPORT_TEMPLATE, {name: 'input', package: 'input'});

console.log('-----------------------------------------------------');
console.log(parseStrTemplate);
console.log('-----------------------------------------------------');

3. 執(zhí)行node index.js
   輸出：

-----------------------------------------------------
import input from '../packages/input/index.js';
-----------------------------------------------------

二、看看 uppercamelcase 是啥

1. 先搭建環(huán)境

$ npm init -y && npm i -D webpack webpack-cli uppercamelcase && touch index.js

2. index.js 文件內(nèi)容：

let upperCamelCase = require('uppercamelcase');

let case1 = upperCamelCase('foo-bar');
let case2 = upperCamelCase('foo_bar');
let case3 = upperCamelCase('Foo-Bar');
let case4 = upperCamelCase('--foo.bar');
let case5 = upperCamelCase('__foo__bar__');
let case6 = upperCamelCase('foo bar');
let case7 = upperCamelCase('foo', 'bar');
let case8 = upperCamelCase('__foo__', '--bar');

console.log('-----------------------------------------------------');
console.log('foo-bar =>                   ' + case1);
console.log('foo_bar =>                   ' + case2);
console.log('Foo-Bar =>                   ' + case3);
console.log('--foo.bar =>                 ' + case4);
console.log('__foo__bar__ =>              ' + case5);
console.log('foo bar =>                   ' + case6);
console.log('params:[foo, bar] =>         ' + case7);
console.log('params:[__foo__, --bar] =>   ' + case8);
console.log('-----------------------------------------------------');

3. 執(zhí)行node index.js
   輸出：

-----------------------------------------------------
foo-bar =>                   FooBar
foo_bar =>                   FooBar
Foo-Bar =>                   FooBar
--foo.bar =>                 FooBar
__foo__bar__ =>              FooBar
foo bar =>                   FooBar
params:[foo, bar] =>         FooBar
params:[__foo__, --bar] =>   FooBar
-----------------------------------------------------

目錄

• element源碼學(xué)習(xí)一(package.json)
• element源碼學(xué)習(xí)二(dev)
• element源碼學(xué)習(xí)三(build:file)
• element源碼學(xué)習(xí)四(build:file)
• element源碼學(xué)習(xí)五(build:file)