脚手架工具
- 一、概要
- 二、常用的脚手架工具
- 三、Yeoman简介
- 四、Yeoman基础使用
- 五、Sub Generator
- 六、自定义Generator
- 七、创建Generator模块
- 八、根据模板创建文件
- 九、接收用户输入数据
- 十、Vue Generator 案例
- 十一、发布Generator
- 十二、Plop
- 十三、Plop的基本使用
- 十四、脚手架的工作原理
一、概要
脚手架的本质作用：创建项目基础结构、提供项目规范和约定。
相同的组织结构、开发范式、模块依赖、工具配置、基础代码。可以通过脚手架快速搭建特定类型的项目骨架，基于这个骨架进行后续开发工作。
二、常用的脚手架工具
特定项目类型的脚手架工具：
React项目：create-react-app
Vue.js项目： vue-cli
Angular项目：angular-cli
根据信息创建对应的项目基础结构
通用性脚手架工具：
Yeoman，可以根据一套模板，生成一个对应的项目结构。灵活易扩展
Plop,用于在开发过程中，创建特定类型的文件
三、Yeoman简介
一款用于创建现代化web应用的脚手架工具。更像是一个脚手架运行平台，可通过Yeoman搭配不同的generator去创建任何类型的项目
过于通用不够专注
四、Yeoman基础使用
1、安装：yarn global add yo
案例中node v10.16.2 npm v6.9.0 yarn 1.17.3
搭配对应项目的generator。
2、如果要想生成node_modules项目，可以使用generator-node模块：yarn global add generator-node
3、自动创建全新的node_modules: mkdir my-module
4、yo node yeoman提供的yo命令安装 generator-node的生成器，运行要把前缀 generator-去掉。这边会报错，尝试下这个命令解决 npm cache clean --force
总结：
全局安装yo：npm install yo --global yarn global add yo
安装对应的generator：npm install generator-node yarn global add generator-node
通过yo运行generator：cd path/project-dir mkdir my-module yo node
五、Sub Generator
https://github.com/Yeoman/generator-node 1、有时只需在已有的项目中创建特定类型的文件 。如在已有的项目上新增readme,新增配置文件eslint，babel的配置文件等，可以用生成器自动去生成。可以使用Yeoman所提供的Sub Generator 这样一个特性来实现。在项目目录下运行特定Sub generator的命令去生成对应的文件。可以使用generator-node里面所提供的一个子集的生成器cli生成器，帮我们生成一个cli应用所需要生成的文件。
2、执行 yo node:cli 重写了package.json文件并创建了lib\cli.js文件。package.json文件最底下出现一个bin的配置以及新的dependencies。这都是在cli应用中所需要的。有了这些可以将模块作为全局的命令行模块来使用
3、yarn link link到全局范围，link到全局范围后，可以使用模块的名字运行刚加进来的模块
my-module --help 报错 可以执行如下chmod 755 lib/cli.js（chmod是Linux下设置文件权限的命令，后面的数字表示不同用户或用户组的权限） 命令解决 这是给lib目录下的cli.js文件设置运行权限
4、yarn 安装依赖 my-module --help 注意：https://yeoman.io/并不是每一个generator它都提供子集的生成器
常规使用步骤：1、明确你的需求 2、找个合适的Generator 3、全局安装找到的Generator 4、通过Yo运行对应的Generator 5、通过命令行交互填写选项 6、生成你所需要的项目结构
例：如需要创建一个网页应用，在Yemon官网搜索web app 找到对应的generator
yarn global add generator-webapp 然后yo webapp 然后会出现一些问题选项，需要自己来选
然后会自动安装依赖。这个生成器生成项目当中会依赖一些c++的模块，这些模块需要在安装的过程中需要下载一些二进制文件，这些文件不能通过npm镜像去加速。但可以通过对应的镜像去提高这些二进制下载的速度，比如node-sass可以通过淘宝镜像源做一些加速
六、自定义Generator
自定义一个带有一定基础代码的vue项目脚手架
七、创建Generator模块
Generator本质上就是一个NPM模块
1、Generator需要有特定结构
app文件夹用于存放生成器对应的代码。如果需要提供多个sub-generator可以在app同级目录继续添加新的生成器目录如component目录，那么模块就有了component子生成器
2、 yeoman generator的模块名称必须是如下格式generator-name
mkdir generator-sample
cd generator-sample
yarn init 创建一个package.json
yarn add yeoman-generator 这个模块提供了生成器的基类，这个基类提供了一些工具函数，让在创建生成器的时候更加便捷
code . 通过vscode打开这个目录
按照上述特定结构创建目录文件
this.fs.write(写入文件的绝对路径，写入文件的内容)
然后 yarn link 把这个模块链接到全局范围，使之成为一个全局模块包，这样yeoman在工作时就可以找到我们自己写的generator-sample.这样就可以通过yeoman运行这个生成器
cd …
mkdir my-proj
cd my-proj
yo sample 就会创建一个叫temp.txt文件
八、根据模板创建文件
相对于手动创建每个文件，模板方式大大提高了效率，特别实在文件比较多比较复杂的情况下
1、在生成器目录下添加一个templates目录,将我们需要生成的文件都放在templates目录作为模板，模板中完全遵循EJS模板引擎的模板语法。有了模板之后就不需要借助fs.write方法去写入文件。而是借助fs中专门写入模板引擎的方法copyTemplate方法（模板文件路径，输出文件路径，模板数据上下文）
模板文件路径可以借助templatePath方法获取
输出路径借助destinationPath
模板数据上下文，只需定义对象即可
2、this.fs.copyTpl(三个参数) 自动把模板文件映射到生成的输出文件上
3、通过yeoman运行我们这个generator,运行命令 yo sample 此时yeoman在运行过程当中就会自动用模板引擎去渲染模板，将渲染后结果放到输出目录
九、接收用户输入数据
对于模板中的动态数据如项目标题项目名称，一般通过命令行交互的方式询问使用者从而得到。那在generator当中想要发起命令行交互的询问。可以通过实现generator这个类型当中的prompting方法
这个方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
this.prompt() 这个方法返回一个promise 需要return 这样yeoman在工作时就有更好的异步流程控制，方法接收数组参数，每一项都是问题对象
{type: ‘input’,name:‘name’,message:‘Your project’,default:this.appname}
使用用户输入的方式接收用户提交的信息
name就是最终得到结果的一个键
message界面上给用户的一个提示，也就是所谓的问题
default 父类当中自动拿到的当前生成项目的这个目录的文件夹的名字。会作为这个问题的默认值
十、Vue Generator 案例
自定义一个带有基础代码vue项目脚手架。首先创建一个基础项目结构，包含所有的需要重复使用基础代码，然后封装一个generator用于生成理想的项目结构
mkdir generator-wh-vue
cd generator-wh-vue
yarn init
yarn add yeoman-generator 安装yeoman的依赖
新建主入口文件generators/app/index.js
在app下新建templates目录，将目录结构放进去作为模板
可以在项目名称的地方替换成EJS的模板标记
十一、发布Generator
generator是npm模块，所以发布generator即是发布npm模块
发布之前，需要把项目的源代码托管到一个公开的源代码仓库上去
创建本地仓库之前，创建一个gitignore,忽略node_modules目录
1、echo node_modules > .gitignore
2、git init 初始化本地空仓库
3、git status 发现文件没有被跟踪
4、git add .
5、git commit -m ‘feat: initial commit’
在github创建一个新的仓库，仓库名字generator-wh-vue Create respository
6、git remote add origin 远端地址 这样就为本地仓库添加一个远端仓库的别名。然后push时就可以使用这个别名
7、git push -u origin master 这样就把本地master分支的代码推送到远端的master分支
8、npm publish 或者yarn publish 去发布这个模块。如果用的是淘宝的npm镜像源去取代官方的镜像会报错。因为淘宝的镜像是一个只读的镜像。可以修改本地的镜像配置，或者publish的时候跟上一个-registry的参数让它等于官方的镜像
9、yarn publish --registry-https://registry.yarnpkg.com
这个时候就会自动推送这个项目到yarn的官方镜像，而yarn的官方镜像和npm是保持同步的。这样就把我们的模块发布成功了
10、npm官网上去刷新一下我们这个地址npmjs.com/package/generator-wh-vue，这个时候我们创建的模块就被推送上来了.有了这样一个模块，我们就可以在全局范围通过npm或yarn去安装，然后通过yeoman去使用它。注意如果需要你的generator在官方的仓库列表中也会出现的话，可以为你的项目添加一个yeoman-generator的关键词
十二、Plop
一个小而美的脚手架工具
用于创建项目中特定类型的文件的小工具，类似yeoman中的sub-generator,不过它一般不会独立使用，一般我们都会把plop集成到项目中，用来自动化创建同类型的项目文件。提高创建重复文件的效率
十三、Plop的基本使用
1、yarn add plop --dev
2、项目根目录下新建plopfile.js 这是plop工作的入口文件，需要导出一个函数。此函数接收一个plop对象，对象里提供了一系列工具函数，用于创建生成器任务…
3、yarn plop component 启动plop程序
yarn 会自动找到node_modules下面bin目录下的命令行工具
总结：
将plop模块作为开发依赖安装
项目根目录下创建一个plopfile.js文件
在plopfile.js文件中定义脚手架任务
编写用于生成特定类型文件的模板
通过plop提供的CLI运行脚手架任务
十四、脚手架的工作原理
启动过后会自动询问一些预设的问题，然后将
回答的结果结合一些模板文件生成一个项目的结构。
脚手架工具实际上就是一个node的CLI应用，创建脚手架应用就是创建一个CLI应用
1、mkdir sample-scaffolding
cd sample-scaffolding
yarn init
2、在package.json中添加一个bin字段，用于指定一下我们这个cli应用的入口文件cli.js
然后添加cli.js文件
3、Node CLI 应用入口文件必须要有这样的文件头。如果是Linux或者macOS系统下还需要修改此文件的读写权限为755.具体就是通过chmod 755 cli.js
4、然后yarn link 到全局就可以使用sample-scaffolding命令 执行，意味着cli应用的基础就ok了
5、脚手架工作过程
yarn add inquirer 模块 来发起命令行交互询问
6、yarn add ejs 模板引擎
