前端工程化 通过yeoman-generator将文件加载到本地

要通过yeoman来将generator里相应的内容放到本地项目中，我们首先要在全局安装yo

npm i yo -g

接下来全局安装对应的generator

npm i generator-<name> -g

cd到相应的目录下，通过yo运行generator，就可以将相应内容放到本地

yo <name>

除了网上可以找到的相应generator外，我们也可以自己写一个generator

实现简单的generator来将文件写入本地

新建一个文件夹，文件夹的名字要以generator-开头，后面接一个名字，在后面的指令中需要用到

我在这里新建了一个generator-test文件夹，使用npm init初始化package.json，然后将yeoman-generator的npm包下载到本地项目

mkdir generator-test

cd generator-test

npm init

npm i yeoman-generator

在项目建好后，在项目中新建app/generator/index.js做为Generator核心入口，导出一个继承自Generator的类型，在yeoman-generator工作是会执行一些相应的方法，我们可以在这些方法中进行一些操作，比如写入文件等操作

const Generator = require("yeoman-generator");

module.exports = class extends Generator{ // 导出继承自Generator的一个类
    writing(){ // Generator将文件写入本地的方法
        // 调用Generator的fs中的write方法来写入文件  第一个参数为写入的绝对路径，第二个参数为写入内容
        this.fs.write( 
            this.destinationPath("test.txt"),
            Math.random().toString()
        )
    }
}

然后使用npm link将这个模块链接到全局

npm link

然后退出这个项目，另建一个文件夹，使用yo 指令来执行模块的相应操作，这里的就是我们之前创建项目时，generator-后面的内容

cd ..
mkdir test-proj
cd test-proj
yo test

打开新建的test-proj文件夹，可以看到有一个新的test.txt文件，里面写着一个随机数

要注意的是，yo 这里的name实际上不是看文件夹的名字的，而是看package.json中的name属性中generator-后面的内容，如果只是改文件夹名的话是无法修改的

通过模板实现文件加载到本地

在上面已经提到了如何将文件写入到本地，但是一个个的文件写入很是麻烦，我们要的应该是像使用脚手架工具的时候，一个命令就能将很多内容下载到本地的操作，这种操作我们可以通过模板来实现

新建一个generator-temp文件夹，执行各种初始化操作

npm init
npm i yeoman-generator

在项目中创建下列的目录

与上面直接写入文件的generator的文件目录不同的是，我们在app文件夹下创建了templates文件夹，这个文件夹是用来存放要写入本地的模板文件，我们在这个文件夹下创建一个temp.txt，写入一些相应的内容，在templates下的文件可以使用ejs语法，我们写入如下内容

这是一个模板文件
<%= title%>

在index.js中写入如下内容

const Generator = require("yeoman-generator");

module.exports = class extends Generator{ // 导出继承自Generator的一个类
    writing(){ // Generator将文件写入本地的方法
        // 通过模板方式实现文件写入
        // 模板文件路径
        const temp = this.templatePath("temp.txt")
        // 输出文件路径
        const output = this.destinationPath("temp.txt")
        // 模板数据上下文
        const content = {title:"这是ejs的title内容"}

        this.fs.copyTpl(temp,output,content)
    }
}

用npm link将模板链接到全局

去到一个文件夹中执行yo temp，新建了一个temp.txt文件，写着

这是一个模板文件
这是ejs的title内容

写入模板中的文件夹

如果我们要写入一个文件夹的话，我们只需要写入文件夹名就可以了，将index.js代码改为下面这样

const Generator = require("yeoman-generator");

module.exports = class extends Generator{ // 导出继承自Generator的一个类
    writing(){ // Generator将文件写入本地的方法
        // 通过模板方式实现文件写入
        // 模板文件路径
        const temp = this.templatePath("demo")
        // 输出文件路径
        const output = this.destinationPath("demo")
        // 模板数据上下文
        const content = {title:"这是ejs的title内容"}

        this.fs.copyTpl(temp,output,content)
    }
}

在templates文件夹下新建demo文件夹，demo文件夹下写入index.html和style.css，执行npm link，到测试文件夹下执行yo temp发现demo文件夹被写入了

响应用户的输入

用过脚手架的朋友们都知道，我们使用一个脚手架的时候，命令行总是会出现各种问题，而根据我们的问题，初始化的内容也不一样，这里是用到了prompting方法，在这个方法内接受用户的键入，将其存储到类本身的某个属性中，在writing中找到这个属性获取相应的值，根据相应的值获取不同的模板
将index.js改成

const Generator = require("yeoman-generator");

module.exports = class extends Generator{ // 导出继承自Generator的一个类
    prompting(){
        // 调用Generator的prompt方法来发出对用户的命令行询问
        // prompt接收一个数组参数，每个数组成员是一个问题的信息
        return this.prompt([{
            type:"input", // 问题的类型
            name:"title", // 最终得到结果的一个属性名
            message:"your title is", // 询问的问题内容
            default:"123" // 默认值
        }]).then(answer=>{
            this.answer = answer // 将得到的答案赋值this.answer
        })
    }
    writing(){ // Generator将文件写入本地的方法
        // 通过模板方式实现文件写入
        // 模板文件路径
        const temp = this.templatePath("temp.txt")
        // 输出文件路径
        const output = this.destinationPath("temp.txt")
        // 模板数据上下文
        const content = this.answer

        this.fs.copyTpl(temp,output,content)
    }
}

执行npm link链接到全局，接下来去到一个空文件夹，执行yo temp，看到了如下的问题

显然括号内的123就是我们设定好的默认值，而“your title is”就是我们的问题，随便写个zem进去敲下回车

查看创建的temp.txt

完全符合预期

yeoman-generator写入方法的优先级顺序

上面我们写入了两个方法，一个prompting方法，一个writing方法，实际上，写在这里的方法有一定的优先级顺序，在官网找到了相应的顺序，官网内容如下

1. initializing - Your initialization methods (checking current project state, getting configs, etc)
2. prompting - Where you prompt users for options (where you’d call this.prompt())
3. configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)
4. default - If the method name doesn’t match a priority, it will be pushed to this group.
5. writing - Where you write the generator specific files (routes, controllers, etc)
6. conflicts - Where conflicts are handled (used internally)
7. install - Where installations are run (npm, bower)
8. end - Called last, cleanup, say good bye, etc

按官网的顺序，写入的方法名字和上面的名字相同时，按上面的名字优先级顺序处理，如果与上面名字不同，则按default的优先级处理