学习1.0版本之自定义 Generator

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」

目标

基于Yeoman搭建自己的脚手架

为什么要搭建自己的脚手架

通过之前的Yeoman的介绍，我们可以通过不同的Generator来完成我们的一些需求，但是我们还是有创建我们自己的Generator的必要，因为市面上的Generator都是通用的，但是我们在项目中还是会遇到一些特殊的、贴合与公司内部业务的通用组件，那我们就可以把这些组件、方法集成在我们的Generator中，让脚手架工具区发挥更大的价值。

例如： 我们使用 vue-cli 进行创建的时候，官方也只会提供一些基础的内容，但是我们需要使用的例如 axios、vuex等，需要我们手动引入，并重新编写基础代码

那么自定义脚手架该如何实现呢？接下来我们来实现一个简单的vue项目，来一点点介绍

创建 Generator 模板

Generator 本质上就是一个 NPM 模板，但是 Generator 有特定的结构

开始演示

1. 首先我们进入我们需要使用的项目文件夹中
2. 运行以下命令，创建package.json文件

npm init

或

yarn init

（在运行初始化命令时，我们创建的包名需要以generator-xxxx的方式进行命名） 3. 运行以下代码，去创建生成器的基类

npm add yeoman-generator

或

yarn add yeoman-generator

4. 然后进入文件中创建相应的文件

• generators（需要用这个进行类型命名）
  • app
    • index.js 此文件作为 generator 的核心入口
      需要导出一个继承自 Yeoman Generator 的类型
      Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
      我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
      

小结

到此我们就创建好了一个基础的文件，接下来我们就要进行路口页面的改造、使用模板创建文件了，当然我们也会引入VUE，下一节见！

如果喜欢的话，希望继续多多关注！