自定义前端项目模板（yeoman-generator）

---

为什么要使用自定义的前端模板？

有人会问，我要vue项目，直接使用vue-cli简单快捷下载模板不好吗？为什么要自定义模板?
因为随着前端应用的发展，简单的使用vue-cli拉下来的模板不符合我们的要求，往往我们必须经过一番大改动：下载一些必须的插件，导入插件，配置基本样式，以及一些常用的功能模块，或者组件。那么自定义的模板就有着让我们编写一次，终身受用的效果，不需要每次都做一番大改动。

一、下载yeoman

npm install -g yo

使用以上命令下载好之后，就能在全局范围内使用yo命令。

yo --version

你可以使用以上命令来验证yeoman是否安装好。

如果对yeoman比较陌生的话，可以参考一下他的官网。
yeoman官网

二、创建自己的Generator

1.初始化模块

新建一个文件夹，建议以generator-name命名。
在终端执行一下命令来初始化模块。

yarn init

必须注意一点，在下图所示的question name中必须按generator-name名字格式命名。

2.安装yeoman-generator

yarn add yeoman-generator

3.编写目录（重点）

在根目录下创建文件夹generators，generators下有一个app的文件夹，app的文件夹中有index.js，以及templates文件夹。其中index.js是yeoman-generator的入口文件，templates下的文件就是存放的项目模板，在这个项目模板里面你可以做任何的常规配置，比如自定义的公用的css文件，js模块等，以后开启新项目的时候就可以直接按照此模板拉下来，而不用每次都要重复导入css文件，js模块。
那么这里我以普通的vue项目为例子，把这个vue项目作为模板。

4.编写index.js文件（重点）

直接上完整代码再做解释，方便着急的同学直接复制粘贴

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting () {
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname
      }
    ])
      .then(answers => {
        this.answers = answers
      })
  }

  writing () {
    const templates = [
      '.browserslistrc',
      '.editorconfig',
      '.env.development',
      '.env.production',
      '.eslintrc.js',
      'babel.config.js',
      'package.json',
      'postcss.config.js',
      'README.md',
      'public/favicon.ico',
      'public/index.html',
      'src/App.vue',
      'src/main.js',
      'src/router.js',
      'src/assets/logo.png',
      'src/components/HelloWorld.vue',
      'src/store/actions.js',
      'src/store/getters.js',
      'src/store/index.js',
      'src/store/mutations.js',
      'src/store/state.js',
      'src/utils/request.js',
      'src/views/About.vue',
      'src/views/Home.vue'
    ]

    templates.forEach(item => {
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.answers
      )
    })
  }
}

第一步：当然是需要引入我们刚刚安装的yeoman-generator

第二步：我们要导出一个模块，这个模块是一个继承自Generator 的类。yeoman-generator会自动调用我们在此类中定义的一些生命周期方法，如:prompting，writing。

第三步：这个类中你可以实现prompting方法，作用是在其它用户拉下来这个模板的时候，可以根据自己的需求做一些初始化。比如你在使用vue-cli初始化一个vue项目的时候，一开始总是问你很多问题，比如项目名称，要不要使用vuex，要不要使用vue-router，要不要使用单元测试等等。那么prompting方法同理，可以根据用户的不同需求，来初始化项目。在这个方法中必须返回this.prompt()，它接收一个对象数组，数组中每个对象就是一个问题，你可以设置这个问题询问的方式，这里type:'input’的意思就是要求用户手动输入答案；name就是这个问题以及答案的标识，后续可以根据设置的name属性对应的值，来获得这个问题的答案；message就是询问的问题；default:this.appname，为项目生成目录名称。

第四步：根据模板创建文件，在这个类中，还要实现writing方法，把模板写入对应的文件夹中。上面代码中列举了一个数组，这个数组里面的值就是模板中没有给文件的相对路径，那么我们遍历这个数组，使用this.fs.copyTpl()方法来拉取模板内容，创建新项目。这个this.fs.copyTpl()方法接收两个参数，第一个就是templates目录下的文件，第二个就是创建新文件后这个文件的名字，第三个就是刚刚用户根据问题输入的答案，这个稍后会作更详细解释。

5.链接模块及拉取自定义模板

第一步：使之成为一个全局模块包。那么yeoman就可以找到我们自己编写的这个generator。

yarn link

第二步：
在你的项目文件夹下的终端：

yo name

这个name是你一开始yarn init时候输入generator-name的name名称，比如一开始我输入的是generator-xyf-vue，那么此时我应该是执行yo xyf-vue命令。那么执行命令之后，该文件夹下就会出现我们放在templates文件夹下的文件了。

6.发布模板到npm

第一步：

yarn publish --registry=https://registry.yarnpkg.com

这里必须要记得一点就是，如果你设置了淘宝镜像源，就必须按照以上方法发布（因为淘宝的镜像是只读镜像），或者直接复制粘贴就完事，不要想太多。当然发布前，最好把这个模块放在github上，方便管理，这里就不再细述。

输入完命令之后呢，会提示你当前发布的版本，看着输入就好，那么下面一步会要求你输入npm官网中注册的账号，用户名以及密码。

第二步：你可以去npm官网登陆自己的账号，查看刚刚发布的模块，并且根据提示命令下载自己所定义的模板。例如我这里是：npm i generator-xyf-vue（我在定义模块名称generator-name的时候，name设置成了xyf-vue）。

第三步：新建一个文件夹，yarn init初始化项目，然后npm i generator-xyf-vue，下载安装对应依赖，最后一步执行yo xyf-vue即可拉取模板。

7.补充：关于this.answer在文件中呈现出来

举个例子简单，用户想把所定义的project name放在title标签中，那么只需要要templates/public/index.html 中使用EJS 模板标记输出的数据。例如<title><%= name %></title>
关于EJS可以直接查看官网：EJS官网

三、总结

其实自定义前端模板的原理非常简单，不过就是文件的读取和写入过程，再简单来说就是复制粘贴过程，只不过这个过程我们可以人为地根据用户的需要控制一些条件。