前端脚手架工具的应用(主Yeoman)

脚手架工具的作用

脚手架工具可以自动化前端项目搭建过程中的重复性工作
例如:

1. 相同的组织结构
2. 相同的开发范式
3. 相同的模块依赖
4. 相同的工具配置
5. 相同的基础代码

脚手架的本质作用就是创建项目基础结构,提供项目规范和约定.

常用脚手架工具

特定框架的脚手架工具

1. create-react-app
2. vue-cli
3. angular-cli

通用脚手架工具:

1. yeoman
2. plop

通用脚手架Yeoman的使用

Yeoman是一款非常通用,十分灵活的脚手架工具,Yeoman本身工程非常简单,但是它提供很多的generator,通过结合使用generator就可以组合出功能强大且符合项目需求的脚手架工具.

基本使用

1. 全局安装

   npm install yo --global

   或者yarn global add yo

2. 安装generator

   npm install generator-node --global

   或者yarn global add generator-node

3. 通过yo运行generator

   如果generator的名称是: generator-node

   运行: yo node

   如果generator的名称是: generator-node-init

   运行: yo nodeInit

常规使用步骤

1. 明确你的需求
2. 找到合适的Generator
3. 全局范围安装找到的generator
4. 通过yo运行对应的generator
5. 通过命令行交互填写选项
6. 生成你所需要的项目结构

webapp generator使用示范

1. 在命令行安装generator: npm install generator-webapp
2. 通过yo运行generator: yo webapp
3. 填写命令行交互问题,根据需要填写(会询问是否需要sass,bootstrap,jQuery等一些开发库),选好后会自动安装模块
4. 安装成功后,就可以得到一个web应用的目录结构

注意: 有时候生成器会依赖一些C++的模块,这样下载速度可能会很慢,此时可以通过配置淘宝镜像源加快下载速度

自定义Generator

– 搭建属于自己的脚手架

generator基本结构

|- generator-mygenerrator // 外层文件夹名,发布node包是,会自动读取这个名称作为node模块名称
|  |-generators/ ............................生成器目录
|    |- app/.................................默认生成器目录
|       |- template/ ........................模板文件目录(根据需要实现)
|          |- index.html ....................模板文件
|       |- index.js..........................默认生成器实现
|    |- component/...........................其他生成器目录(可以没有)
|       |- index.js..........................其他生成器实现(可以没有)
|  |-package.json............................模块包配置文件

实现一个自定义脚手架

1. 根据上面的基本结构搭建文件目录

2. 进入到gene