# 前言

伴随着前端技术日新月异的发展，前端开发中前后端分离，工程化，自动化等现代化的开发模式越来普及，前端项目也引入了编译，构建，单元测试等现代软件工程化的标准环节。这样大提高了前端的开发效率和业务交付能力。

# Yeoman构建脚手架源码

Lerna 和 Jsdoc 包管理脚手架：github.com/ge-tbms/gen…

TS SDK以及配合Jest测试脚手架：github.com/ge-tbms/gen…

React+SCSS+Mobx 开发环境脚手架: github.com/ge-tbms/gen…

Rax 组件构建脚手架（实现页面和组件分别生成）：github.com/ge-tbms/gen…

# 开箱即用的源码

源码地址：github.com/dkypooh/fro…

# NPM Script搭建开发工作流

npm 允许在 package.json里面，使用 scripts 字段定义脚本命令

{
    "scripts": {
        "start": "node start.js"
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

脚本语法

npm run-script <command> [--silent] [-- <args>...]

@前端进阶之旅: 代码已经复制到剪贴板

命令行下需要使用 npm run <comand> 方式执行脚本

$ npm run start
## 等同于
$ node start.js

@前端进阶之旅: 代码已经复制到剪贴板

# 执行原理

# 配置参数

npm scripts 参数传递的命令行分割符是 '--', 即可将后续参数添加到 process.env.argv 数组中。例如：

$ npm run build -- --name hello

@前端进阶之旅: 代码已经复制到剪贴板

# npm scripts 组合命令

npm脚本需要执行多个任务，首先需要明确它们的执行顺序，然后把他们组合起来。如果是并行执行（即同时的平行执行），可以使用 & 符号。

$ npm run build-js & npm run build-css

@前端进阶之旅: 代码已经复制到剪贴板

如果是串行执行（即只有前一个任务成功，才执行下一个任务），可以使用 && 符号。

$ npm run eslint && npm run build && npm run publish

@前端进阶之旅: 代码已经复制到剪贴板

从代码检查，到代码构建，最后到发布。

# 默认命令

默认命令可以省略掉 run

npm start 是 npm run start
npm stop 是 npm run stop的简写
npm test 是 npm run test的简写
npm restart 是 npm run stop && npm run restart && npm run start的简写

@前端进阶之旅: 代码已经复制到剪贴板

# npm钩子

npm提供了两种钩子，pre和post，分别代表操作前和操作后

{
    "scripts": {
        "prebuild": "echo 1",
        "build": "echo 2",
        "postbuild": "echo 3"
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

用户执行 npm run build 的时候，会自动按照下面的顺序执行。

$ npm run prebuild && npm run build && npm run postbuild
## 最终输出
$ 123

@前端进阶之旅: 代码已经复制到剪贴板

# 默认钩子

prepublish，postpublish

preinstall，postinstall

preuninstall，postuninstall

preversion，postversion

pretest，posttest

prestop，poststop

prestart，poststart

prerestart，postrestart

# Yeoman Generator搭建开发工作流

Yeoman，它不只是一个工具，而是一个工作流。它其实包括了三个部分yo、grunt、bower，分别用于项目的启动、文件操作、包管理。

# 打造一个自己的集成工具流

源码地址：github.com/dkypooh/fro…

# 安装及步骤

可以同时安装 Yeoman(yo) 和 Generator(generator-generator)构建器脚本

$ npm i -g yo generator-generator

@前端进阶之旅: 代码已经复制到剪贴板

# 生成文件目录

$ yo generator

@前端进阶之旅: 代码已经复制到剪贴板

# 标准Generator目录

templates 是模板目录，例如 React 工程脚手架， index.js 入口文件，维护 Yoeman 各个生命周期。

├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       └── templates   // 模板目录
│       ├── index.js    // 入口文件
└── package.json

@前端进阶之旅: 代码已经复制到剪贴板

# 生命周期回调

initializing - Your initialization methods (checking current project state, getting configs, etc)
- 初始化方法（检验当前项目状态、获取configs、等）
prompting - Where you prompt users for options (where you’d call this.prompt())
- 人机交互，获取用户选项
configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)
- 保存配置（创建 .editorconfig 文件）
default - If the method name doesn’t match a priority, it will be pushed to this group
- 如果函数名称如生命周期钩子不一样，则会被放进这个组
writing - Where you write the generator specific files (routes, controllers, etc)
- 写generator特殊的文件（路由、控制器、等）
conflicts - Where conflicts are handled (used internally)
- 冲突后处理办法
install - Where installations are run (npm, bower)
- 选择安装依赖（npm、bower）
end - Called last, cleanup, say good bye, etc
- 安装结束、清除文件、设置good bye文案、等

# 构建React开发脚手架

我们以 Mobx状态管理 这章我们一起搭建React + Mobx + SCSS工程环境为脚手架模板(app/templates)。通过 yeoman 集成成通用脚手架工具。视频案例：

# 生成器安装

$ npm i -g generator-react-mobx-scss

@前端进阶之旅: 代码已经复制到剪贴板

# 入口文件初始化

Generator 的 index.js 文件，需要集成 yeoman-generator 基类

var Generator = require('yeoman-generator');

module.exports = class extends Generator {};

@前端进阶之旅: 代码已经复制到剪贴板

# 生命周期节点实现

# Initializing

初始化获取用户名信息

// 初始化获取用户名信息
initializing() {
    try {
      this.username = process.env.USER || process.env.USERPROFILE.split(require('path').sep)[2]
    } catch (e) {
      this.username = ''
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

# Prompting

获取基本配置信息

// 获取基本配置信息
return this.prompt([
    // 项目名称
    {
    type: 'input',
    name: 'name',
    message: 'Your project name',
    // 项目描述
    {
        type: 'input',
        name: 'description',
        message: 'Your project description',
        default: ''
    },
    // 用户名（默认系统）
    {
        type: 'input',
        name: 'username',
        message: 'Your name',
        default: this.username
    },
    // 邮箱信息
    {
        type: 'input',
        name: 'email',
        message: 'Your email',
        default: ''
    },
    // npm 镜像选择
    {
        type: 'list',
        name: 'registry',
        message: 'Which registry would you use?',
        choices: [
            'https://registry.npm.taobao.org',
            'https://registry.npmjs.org'
        ]
    }
]).then(answers => {
    this.answers = answers
    this.obj = {answers: this.answers}
})

@前端进阶之旅: 代码已经复制到剪贴板

# Writing

模板文件复制到项目目录，同时动态插入配置信息

# Install

可以选择 npm 或者 yarn 安装依赖。

// 语法结构：npmInstall(pkgs?: string|string[], options?: object, spawnOptions?: object): void;
// undefined为全部安装
install() {
    this.npmInstall(undefined, {
      registry: this.answers.registry
    })
}

@前端进阶之旅: 代码已经复制到剪贴板

# End

end() {
    this.log.ok('Project ' + this.answers.name + ' generated!!!')
    this.spawnCommand('npm', ['start'])
}

@前端进阶之旅: 代码已经复制到剪贴板

# 结语

在 React组件 章节学习中，大家也接触到了 npm scripts 的使用，本章节系统化的带大家一起学习 npm 脚本以及 npm hooks 来管理项目周期。同时带大家一起学习了 Yeoman 基本原理和生命周期。最后以 react-mobx-scss 项目为模板，一起开发了 generator-react-mobx-scss 脚手架生成器，读者可以在自己平时的项目中使用此脚手架生成器。

# 前言

# Yeoman构建脚手架源码

# 开箱即用的源码

# NPM Script搭建开发工作流

# 执行原理

# 配置参数

# npm scripts 组合命令

# 默认命令

# npm钩子

# 默认钩子

# Yeoman Generator搭建开发工作流

# 打造一个自己的集成工具流

# 安装及步骤

# 生成文件目录

# 标准Generator目录

# 生命周期回调

# 构建React开发脚手架

# 生成器安装

# 入口文件初始化

# 生命周期节点实现

# Initializing

# Prompting

# Writing

# Install

# End

# 结语

# 参考文献

构建开发工作流|IM Chat

构建开发工作流|IM Chat