如何写一个项目初始化工具（上）

「这是我参与2022首次更文挑战的第37天，活动详情查看：2022首次更文挑战」

遇到的问题

在开发新项目时，我们通常会有两种方式初始化前端项目：

• 第一种方式：拷一个旧项目，一通乱删，在剩下功能的基础上开发新功能；
• 第二中方式：从 0 开始搭建新项目，包括配置文件、安装依赖包、路由管理等等；

第一种方式不一定删得干净，让没用的代码留在新项目里。第二种方式操作比较繁琐，如果项目比较多的时候，需要做重复的工作。有没有其它办法呢？下面我们介绍通过 yeoman 来写一个项目初始化工具。

写一个项目初始化工具

今天的主角是 yeoman 官网，yeoman 是 generator 的 generator，可以用来做脚手架。我们借用 yeoman 来写一个初始化工具，用于快速创建项目。

第一步：安装 yeoman

npm install -g yo

第二步：用 npm 初始化一个模块

npm init

注意：这里包名必须是：generator-xxx，xxx 就是 generator 的名称，如果格式不对 yeoman 认不了。

第三步：在新模块上安装 yeoman-generator 依赖

npm install yeoman-generator

安装成功后 package.json 文件会是这样

{
  "name": "generator-createapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

第四步：创建目录结构

修改 package.js 的配置项 "main": "generators/app/index.js"。

第五步：编写代码

在 generators/app/index.js 文件中加入以下代码，代码中的自定义方法 method1、method2 会被 yeoman 依次执行，我们的逻辑就可以写在这些方法里。

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    constructor(args, opts) {
        // Calling the super constructor is important so our generator is correctly set up
        super(args, opts);
    }

    method1() {
        this.log('method 1 just ran');
    }

    method2() {
        this.log('method 2 just ran');
    }
};

第六步：将本地的模块 link 到 npm 标准模块

generator-createapp 是本地模块，如果要使用我们需要先将它 link 到 npm 的标准模块，这里需要用到 npm 的 link 命令。在 generator-createapp 根目录下运行以下命令：

npm link

同一个 generator 只需要 link 一次，后面的代码修改不需要重新 link。

然后可以通过 yo name 命令验证 generator 是否能用：

yo createapp

如果运行正常，命令行显示结果将如下图所示：

至此我们就完成了简单的 generator 开发工作，但是这个 generator 只能输出两行日志，没有实际功能，下一节我们继续完善它。