2023.2 ElementUI源码-学习npm run dev之build

ElementUI源码-学习npm run dev之build

本文是为了学习组件库搭建思路而衍生的一篇文章，最近在思考搭建项目业务组件库，发现公司封装的命令也是基于vue2的，因此开始了学习ElementUI源码学习之路。
从npm run dev开始

为什么执行npm run dev得时候要执行npm run build:file这一步

 "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即执行的->"bootstrap": "yarn || npm i",这一步很简单就是运行前执行npm i下载依赖项，后面的npm run build:file是打包一系列文件用的，为什么要将这些文件打包呢？先来看下

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

可以看到是对icon、entry,i18n,version等进行打包

build icon

node build/bin/iconInit.js

postcss.parse方法返回一个新的根或者一个文档节点

postcss.parse.nodes将css节点以js数组的方式输出

1675605387498.png

'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
//加载Icon文件
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');

var nodes = postcss.parse(fontFile).nodes;
var classList = [];

//遍历所有Node，截取css类的类名最终classList中存的内容
//例如：读取到的.el-icon-ice-cream-round:before ，处理后的class ice-cream-round
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]);
  }
});
//为什么要倒序不明白？可能组件库的icon也不是一次性就决定列入这些icon的，是逐步加进去的，每次追加icon是在文件头加的，不是追加，因此希望按照加入的顺序排列。看了下官网倒叙顺序和展示的顺序默认是一致的。
classList.reverse(); // 希望按 css 文件顺序倒序排列
//将classList的内容写入到examples\icon.json目录
fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});

build entry

node build/bin/build-entry.js

为什么要用installTemplate和listTemplate两个数组来存组件信息？

installTemplate单纯的组件，包含Vue.component注册的组件；listTemplate所有的组件，包含通知类型的组件

//components.json组件路径映射{"pagination": "./packages/pagination/index.js",}
var Components = require('../../components.json');
var fs = require('fs');
//字符串模板生成器，使用render中的传参做字符串替换
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase');
var path = require('path');
var endOfLine = require('os').EOL;

//输出路径：src\index.js
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
//指定引入文件路径：import Pagination from '../packages/pagination/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 = [];
//为什么要用两个数组来存？不包含'Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'
var installTemplate = [];
//Loading
var listTemplate = [];

ComponentNames.forEach(name => {
    //将组件名首字母变为大写
  var componentName = uppercamelcase(name);
    //引入组件：'import Pagination from '../packages/pagination/index.js"
  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}`);
});
//通过render函数解析模板中的字符串
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);

Vue.use和Vue.component区别？
这篇文章讲的很好，可以进行参考，主要区别在于install函数

[
  {
    "lang": "zh-CN",
    "pages": {
      "index": {}
    }
  } ,
    {
    "lang": "en-US",
    "pages": {
      "index": {}
    }
  }
]

Vue.use注册插件，接收一个对象，参数必须具有install方法，

Vue.component注册全局组件

build i8n

node build/bin/i18n.js

在examples\pages目录生成不同的语言包，语言包类型在examples\i18n\page.json中读取配置

page.json

'use strict';

var fs = require('fs');
var path = require('path');
var langConfig = require('../../examples/i18n/page.json');

langConfig.forEach(lang => {
  try {
    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  } catch (e) {
    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  }
//遍历配置项
  Object.keys(lang.pages).forEach(page => {
    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
    var content = fs.readFileSync(templatePath, 'utf8');
    var pairs = lang.pages[page];

    Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });

    fs.writeFileSync(outputPath, content);
  });
});

build version

node build/bin/version.js

为什么要把版本号列举出来？不能每次自动新增吗？
这个问题目前还没找到答案，有想法的小伙伴评论进行交流。

var fs = require('fs');
var path = require('path');
var version = process.env.VERSION || require('../../package.json').version;
var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' };
if (!content[version]) content[version] = '2.15';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

以上执行最终生成的内容有：

iconInit对应examples\icon.json

build entry 对应src\index.js

i18n对应examples\pages

version对应examples\versions.json