深度剖析element-ui之build-entry生成主入口文件【四】

build-entry.js 是干嘛的？

见名知意，build-entry是建立入口。

分析代码

模块

1、components.json

  "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",

这个JSON放在element的根目录下，将组件名和组件的入口对应起来，用于批量注册全局组件：

  components.forEach(component => {
    Vue.component(component.name, component);
  });

2、fs

生成入口文件用

3、json-templater/string

模板字符串替换

用法如下：

var render = require('json-templater/string');  //引入模块
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';'; // 声明一个模板
render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
 })

4、path
用来获取被执行JS所在的绝对路径

var OUTPUT_PATH = path.join(__dirname, '../../src/index.js'); // 指定要生成的入口文件地址

5、endOfLine

由于在不同的操作系统上换行符代表的ASCLL码不同，所以这里引用endOfLine

var endOfLine = require('os').EOL;
'some text' + endOfLine

结构

1、引入模块
2、声明几个模板

包含入口需要引入的模块、需要注册成组件的模块、需要导出的模块对应的模板语句，还有一个主文件模板

3、写入模板
4、用模板生成入口文件