利用yeoman搭建自己的脚手架

背景

平时开发vue项目我最喜欢的组合是: vue + vuex + axios + element + lodash
但是每次初始化项目时都得：

• 用vue-cli搭建vue + vuex
• 安装引入axios
• 安装引入element-ui
• 安装lodash并设置为全局（配置eslint）

这些步骤还是挺重复的。

再者， 如果是公司团队开发就更需要统一的规范（如eslint规范），和统一的结构了（如统一挂载axios，登陆拦截等）

那么，用yeoman刚好帮你处理这些问题！团队leader处理好脚手架之后，团队成员一键安装即可

yo your-project

yeoman简介

简单介绍下 Yeoman，它是一个脚手架生成工具，比如在之前写 ASP.NET MVC 的时候，Visual Studio 会给你选模板，然后生成一个项目的基本结构（脚手架），这对提升开发体验是很有帮助的，节省了重复劳动。然而前端没有什么 IDE（WebStorm？或许吧），没有一个固定的开发模式，可能你喜欢 jshint，我想用 eslint，你觉得 angular 顺手，我觉得 vue 更合适，这时就可以使用 Yeoman 这个工具，生成一个 适合自己技术栈 的脚手架，需要的一些文件都预先生成好，给自己省点事。

使用yeoman搭建自己的vue脚手架

安装基本的工具：
全局安装yo

npm i  -g yo

全局安装`generator-generator

npm install -g generator-generator

准备好自己的模板:
我这里搭建好了自己的模板，项目我取名叫vue-temp，并且包含vue + vuex + axios + element + lodash
目录结构大概如下：

开始构建自己的脚手架:
在vue-temp目录下运行yo generator

接下来会是一系列的咨询问题，其中generator name必须是generator-开头的

基础框架安装完成之后目录大概长这样：

多了一个generator-vue-temp的文件夹，里面的文件结构长这样（只列举了部分）：

├── .yo-rc.json
├── package.json
├── generators
│   ├── app
│       ├── templates
│           ├── dummyfile.txt
│       ├── index.js

其中

• .yo-rc.json 用于存储项目配置，一般不会用到，无需关注
• package.json npm 项目信息文件，主要关注 author、version 域即可
• generators 目录即项目模板代码
• generators/templates 用于存放项目模板文件
• generators/app/index.js 定义项目手脚架的代码

下面我们进行一些改造:
step1：
把generator-vue-temp剪切到与vue-temp同级：

step2：
把vue-temp里面的文件（除了node_modules）拷贝到generator-vue-temp\generators\app\templates文件夹下，并把文件夹下原有的dummyfile.txt删除了

完成之后大概这样

step3：
修改配置文件generator-vue-temp\generators\app\index.js文件：

• 修改writing函数，设置模板文件目录和输出路径
• 修改install函数，注释掉这一句（主要作用是不要默认安装依赖）
  

到这里，你的脚手架其实已经搭建好了！

测试脚手架:
在generator-vue-temp目录下执行npm link命令，意思是把这个node包链接到本地

然后在generator-vue-temp的同级目录下新建文件夹test-vue-temp，再运行

yo vue-temp

出现以下命令就是成功了

输入y按回车，等待一下子，就会发现新生成的内容其实和我们在generator-vue-temp\generators\app\templates下的内容是一模一样的了！

（好奇的同学可以跑起来该项目看看是不是一样的）

至此脚手架已经完成生成成功!!!

接下来你可以通过npm发布到网上，方便自己去下载使用

几个问题

.eslintrc.js这类型的文件没有复制到新的项目里面去
可以改写generator-vue-temp\generators\app\index.js文件里的writing函数，指定把这些文件复制到新项目里面去

我想在应用脚手架时加几个问题，方便生成的项目的package.json填写
可以改写generator-vue-temp\generators\app\index.js文件里的prompting函数，增加几个问题，然后在writing时对package.json内容进行改写

module.exports = class extends Generator {
  prompting() {
    // Have Yeoman greet the user.
    this.log(
      yosay(`Welcome to the divine ${chalk.red('generator-vue-temp')} generator!`)
    );

    const prompts = [{
        type: 'input',
        name: 'name',
        message: '请输入项目名?',
        default: 'vue-temp'
      }, {
        type: 'input',
        name: 'description',
        message: '请输入项目描述?',
        default: 'a simple description'
      }, {
        type: 'input',
        name: 'author',
        message: '请输入项目作者?',
        default: ''
      }
    ];

    return this.prompt(prompts).then(props => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }

  writing() {
    this.fs.copy(
      this.templatePath('**'),
      this.destinationPath('./')
    );
    // 下面文件默认不能直接应用在新项目里，故指定复制一份
    const specFileList = ['.browserslistrc', '.eslintrc.js']
    specFileList.forEach(file => {
      this.fs.copy(this.templatePath(file), this.destinationPath(file));  
    })
    // 改写package.json
    this.initPackage();
  }
  initPackage () {
    let pkg = this.fs.readJSON(this.templatePath('./package.json'), {});
    const { props } = this;

    Object.assign(pkg, {
      name: props.name,
      description: props.description,
      author: props.author
    });
    this.fs.extendJSON(this.destinationPath('./package.json'), pkg);
  }
};

不止vue，不止前端

总的来说，yeoman给我的感觉就是通过一句命令，帮你把模板文件直接复制到新的项目里面去。而且支持通过prompting提问来修改一些文件。

那么其实yeoman的用法就不仅仅时局限于vue了，可以用在react，angular，甚至python，go，等等其他项目里面去了

参考文献

使用Yeoman制作前端脚手架
手把手入门 Yeoman 模板开发
写一个自己的 Yeoman Generator
yeoman Generator的api文档