【源码阅读】Element-UI 新增组件功能

功能介绍

作用

在 Element-UI 源码中可以通过命令 make new 新增组件，减少重复工作。通过该命令创建组件目录结构，包含测试代码、入口文件、文档。

使用

make new testCom 阿豪阿卡阿甘 // make new 组件名称 中文名称 

源码整体流程

1. 了解 make new 命令

既然是通过 make new 进行的创建，那么就先了解一下 make 是什么，通过 这篇文章 可以知道它其实是一个构建命令，也有对应的配置文件，对应到项目中就是根目录下的 Makefile，从配置文件中可以看到对应的 new 的命令

new:node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS)) 

这里就可以看到 make new 命令对应的是: build/bin/new.js，接下来就进入到该文件中看看都做了什么。

2. 命令参数校验

'use strict';
​
console.log();
process.on('exit', () => {
  console.log();
});
​
if (!process.argv[2]) {
  console.error('[组件名]必填 - Please enter new component name');
  process.exit(1);
} 

文件开始就先对程序退出进行了监听，退出之后打印一个空行，这里的空行和上边的空行都是在美化 UI。

接下来就判断了该命令传入的参数，如果没有组件名则退出并提示。

这里产生的疑问有

1.process.argv 都包含了什么？
2.process.exit(1) 为什么要传入 1 不传可以吗？

这里的疑问不影响主流程，知道它的意思就可以继续往下看，走完主流程之后来解决这些问题。

3. 引入依赖并初始化变量

3.1 引入依赖

const path = require('path');
const fs = require('fs');
// file-save: 将数据流存入文件并使用 Stream 保存(如果目录不存在，模块将自己创建目录)。
const fileSave = require('file-save');
// uppercamelcase: 根据指定格式进行驼峰转换
const uppercamelcase = require('uppercamelcase'); 

3.2 初始化变量

// 组件名称
const componentname = process.argv[2];
// 组件对应的中文名称
const ch