脚手架工具

目录

• 脚手架工具
  • 脚手架工具概要
  • 常用的脚手架工具
  • Yeoman 简介
    • Yeoman 基础使用
    • Sub Generator
    • Yeoman 使用步骤总结

脚手架工具

脚手架工具概要

脚手架的本质作用

创建项目基础解构，提供项目规范和约定

• 项目的组织结构
• 相同的开发范式
• 相同的模块依赖
• 相同的工具配置
• 相同的基础代码

常用的脚手架工具

为特定类型服务脚手架工具

根据信息创建对应的项目基础解构，但一般只适用于自身所服务的框架的项目

• React 项目 => create-react-app
• Vue.js 项目 => vue-cli
• Angular 项目 => angular-cli

通用性项目项目脚手架工具

可根据一套模板，生成一个对应的项目解构

• Yeoman
• Plop 用于项目开发过程中，创建特定的类型文件，例如创建一个组件 / 模块所需要的文件

Yeoman 简介

Yeoman 通用型脚手架工具，容易拓展，比较灵活，可创建属于自己的脚手架。Plop项目开发过程中，创建特定类型的文件。

相比 vue-cli 等，Yeoman 更像是脚手架的运行平台。可通过 Yeoman 搭配 Generator 创建任何类型的项目。可通过创建自己的 generator ，从而去定制属于我们自己的前端脚手架。

缺点：

1、过于通用，不够专注

Yeoman 基础使用

• 全局安装 Yeoman

npm install yo --global # or yarn global add yo

• 安装对应的 generator (例如 generator-node)

npm install generator-node --global # or yarn global add generator-node

• 通过 yo 运行 generator

cd path/to/project-dir
mkdir my-module
yo node

Sub Generator

作用：可用于在已有的项目中创建特定类型的文件，如 .browserslistrc .eslintrc.js 等

• 通过 yo 运行 generator-node 子集生成器

yo node:cli

• 设置成为全局的命令行模块

yarn link

• 安装依赖

yarn

• 运行命令

my-module --help

需注意并不是所有的 generator 都有子集生成器

Yeoman 使用步骤总结

常规使用步骤:

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

如想创建一个网页应用：

1. 先到 Yoman 官网 找到对应的 Generator (generator-webapp)

2. 安装 generator

yarn global add generator-webapp

3. 运行 webapp

yo webapp

npm 镜像加速配置