从零开始作Vue前端架构（9）

前言

相信不少人都用过vue-cli或create-react-app或者相似的脚手架。脚手架方便咱们复制，粘贴，或者clone代码库，并且还能够更具用户的选择，引入用户所须要的插件。脚手架每每搭配着早已设计好了架构的项目，而后按需进行拷贝。html

Yeoman

介绍

官网介绍: The web's scaffolding tool for modern webapps.前端

yeoman是一款来作脚手架的工具，咱们借助它，就能很容易地开发出本身的脚手架了。 yeoman具体的使用，本文不会介绍太多，官网的文档差很少就够了，我也会在文章末尾放上本身搜集的一些参考资料，同窗们本身看看就行了。vue

安装

安装yeoman: npm install -g yonode

generator

generator其实就是一个node module，即npm。yeoman根据咱们写的generator来执行咱们写的构建代码。（对怎么本身选一个npm包不熟悉的同窗，能够戳这里>>） generator文件夹必须以generator-开头，而后以后跟上自定义的脚手架名字，好比generator-zx-vue，将它作成npm包之后，上传到npm官网，只有在电脑上全局安装，而后用yoman运行就行了，以后会详细介绍。react

建立本身的generator

除了手动建立本身的generator项目，咱们还能够经过别人已经作好的脚手架来建立。安装generator-generator: npm install -g generator-generator 而后，运行脚手架: yo generator 以后，咱们就能够看到一系列的提示，按照提示输入完信息之后，咱们就有了一份编写本身的generator的模板项目了。git

编写本身的generator

其实，这个generator脚手架生成的不少文件咱们都不须要管，咱们只须要把注意力放在generator/app这个文件夹下的内容就行了。 templates文件是用来做为仓库，咱们在编写脚本的时候，若是须要哪些文件，就直接去这个仓库里copy出来就行了。github

划重点

1. 问题

由于咱们本身作的generator是一个npm包，咱们天然但愿对其进行版本管理，用上git，方便从此的迭代。 templates其实也是一个独立的项目，咱们以前说了，它是一个早已完成了的项目架子，咱们是从gitlab或者github上copy过来的而已。那该怎么管理这两个不一样的项目呢？web

2. 解决-git子模块

git用的6的同窗确定一会儿就想到git子模块的知识了。不熟悉的同窗能够戳 git文档-子模块>>vuex

所以，咱们不是把项目copy进templates，也不是git clone进templates，而是先删除app文件夹下的templates，而后： git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates 这样的话，咱们就能够更新本身的仓库项目（vue-construct-for-zx-vue），generator项目的话，pull子模块就行了。二者保持独立，方便迭代和维护。vue-cli

编写构建脚本

接下来，咱们就能够来编写app文件夹下的index.js文件了：

const Generator = require('yeoman-generator')
const chalk = require('chalk')
const yosay = require('yosay')
const path = require('path')
const fs = require('fs')

module.exports = class extends Generator {
  initializing() {
    // 打印欢迎语
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan('generator-zx-vue')} generator!`)
    )
  }
  prompting() {
    // 让用户选择是否须要包含vuex
    const prompts = [
      {
        type: 'input',
        name: 'name',
        message: 'Name of project:',
        default: path.basename(process.cwd())
      },
      {
        type: 'input',
        name: 'description',
        message: 'Description:',
        default: '',
      },
      // {
      // type: 'confirm',
      // name: 'includeVuex',
      // message: 'Would you like to include Vuex in your project?',
      // default: false,
      // }
    ]
    return this.prompt(prompts).then(answers => {
      this.name = answers.name
      this.description = answers.description
      // this.includeVuex = answers.includeVuex
      this.log(chalk.green('name: ', this.name))
      this.log(chalk.green('description: ', this.description))
      // this.log(chalk.green('includeVuex: ', this.includeVuex))
    })
  }

  writing() {
    // 复制普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根据用户选择，决定是否安装vuex
    if (this.includeVuex) {
      const pkgJson = {
        name: this.name,
        description: this.description,
        // dependencies: {
        // vuex: '^3.0.1'
        // }
      }
      // Extend or create package.json file in destination path
      this.fs.extendJSON(this.destinationPath('package.json'), pkgJson)
    }
  }

  install() {
    this.npmInstall()
  }

  end() {
    this.log(chalk.green('Construction completed!'))
  }
}

复制代码

语法很简单，具体能够本身看yeoman官方文档，我简单的介绍一下几个比较经常使用的函数，或者说生命周期：

函数名	我用来作什么
initializing	我用来写一些欢迎语
prompting	与用户的交互，好比input、checkbox、confirm等
writing	拷贝和编辑文件
install	安装依赖，如npm install
end	写一些如goodbye的结束语

本地测试是否有用

没发布上线的npm包，本地测试只须要link一下就行了，到generator根目录，而后运行npm link，这样咱们就可使用咱们的generator了，好比，到一个新的空文件夹下运行：yo zx-vue，就能够看到项目开始自动构建了。测试完成后，就能够发布到npm官网了，发布流程可参考我另外一篇文章npm-从0开始写一个npm module

zx-vue

目的

zx-vue是一个以vue-construct做为模板仓库的脚手架，为了方便新项目构建，也为了从此的新项目可以统一。

使用

首先，安装全局yeomman和generator-zx-vue： npm install -g yo npm install -g generator-zx-vue 而后找一个空的文件夹执行: yo zx-vue 生成项目之后的操做能够参考vue-construct 最后，generator-zx-vue的地址是generator-zx-vue

结尾

我以前本来打算把vuex做为一个可选项，让用户选择是否引入这个库。可是，作下来之后发现，由于用到了ejs模板去作这个事情，而后，最终输出的文件会由于<% if (condition) { %>这种ejs语法致使换行，或者缩进不符合eslint。固然，我也能够把项目弄的更空一点，把全部vuex的使用清掉，但这样也不是很好，由于我又想让用户跑起来这个项目就能看到整个全家桶的效果在页面上使用到。其实还有另一种比较暴力的方法就是，我弄一个有vuex的项目，一个没有vuex的项目，而后选择copy哪份，，太暴力。憋了很久也没想到什么很好接受的方法，因此就暂且把vuex也直接带上。最后，也但愿有想法的同窗还有大佬多多留言，给点建议^_^