开发脚手架及封装自动化构建工作流
工程化概述
工程化概念：
前端工程化是指遵循一定标准和规范，通过工具去提高效率、降低成本的一种手段。<br />
工程化是一种概念上的思想，而非单单一门或特定技术。
工程化因素：
模块化、组件化、规范化、自动化四方面因素
1、模块化：
将一个大的文件拆分成多个模块，按照一个个小模块来划分，利于复用和组合
2、组件化：
将展现层内容拆分成功能独立的小单元，利于维护、复用
模块化不等于组件化，模块化偏向于文件资源层面划分，而组件化偏向于UI展现层划分，提高开发效率和代码复用率
3、规范化：
遵循公共或一定的标准规范，可以提高项目与代码的质量，利于多人协作开发和后期维护，降低后期成本
4、自动化：
简单、重复性的工作交由工具（或程序）来完成，既可以提高开发效率，也可以减少人为因素出错概率
工程化解决的问题：
1、传统语言或语法的弊端
如想要使用ES6+新特性，但兼容有问题；想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
2、无法使用模块化、组件化
想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持
3、重复的机械式工作
部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器
4、代码风格统一，质量保证
多人协作开发， 无法硬性统一大家的代码风格，从仓库pull回来的代码质量无法保证
5、依赖后端服务接口支持
部分功能开发时需要等待后端服务接口提前完成
6、整体依赖后端项目
需要部署到后端项目相应目录中，依赖项目结构和服务环境
项目中工程化表现
- 创建项目：自动创建统一项目结构
- 编码环节：代码风格、校验，构建、打包，编译
- 预览环节：本地预览和热更新体验，源码映射，web服务
- 代码提交：代码提交前检查，包括风格与质量
- 部署环节：自动发布，ci/cd
工程化核心
对项目整体的规划或架构，工具只是帮助落地的手段
脚手架工具
常用脚手架工具
- create-react-app
- vue-cli
- angular-cli
- ...
Yeoman
通用脚手架工具
- 安装
## 全局范围内安装yo工具
yarn global add yo
## 安装对应的generator
yarn global add generator-node
## 创建项目目录
mkdir my-module
## 进入项目目录
cd my-module
## 通过yo运行generator
yo node
按照提示依次输入信息，关键字是逗号分隔的数组
Sub Generator
- 安装命令
yo node:cli
- 执行命令链接
yarn link
-
使用自己注册的cli命令
这里会有几个问题：
- 命令有可能会重复（开始默认包名），最好是起一个好记忆又不重复的
- 创建完成后使用时在Mac系统上可能出现
permission denied问题，需要使用chmod u+x ./lib/cli.js来更改权限，后边路径为cli命令文件路径 - 不是所有子集都有cli，要查看是否有
Yeoman 使用总结
- 1、明确你的需求
- 2、找到合适的Generator
- 3、全局范围安装找到的Generator
- 4、通过Yo 运营对应的Generator
- 5、通过命令行交互填写选项
- 6、生成您所需要的项目结构
如生成网站类应用，需要在Yeoman官方网站去查找
同时安装时有些C++依赖没有镜像加速，可设置淘宝镜像加速，如node-sass
自定义Generator
创建你Generator模块
本质上是创建一个Npm模块
要求：
- Generator有自己特有的基本结构
- 名成年必须generator-开头，后边跟上自己的名字，此时才可以找到这个模块
具体过程
- 首先创建一个以generator-开头的目录
- 目录内初始化yarn
- 安装yeoman-generator的一个基类包
- 项目中创建一个特有目录结构
- 在index.js中写入如下要求内容
- 通过yarn link将模块进行注册
- 最后在其他项目目录中使用 yo sample（自己模块名）来使用
// generator核心入口
// 继承自Yeoman Generator
// 导出
// 使用 destinationPath 获取运行时当前项目路径，并传递文件名称
// 如若是传入多个参数，则代表是创建目录，最后一个是文件
// write第二个参数为写入内容
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
writing() {
// 此方法会 在生成文件阶段调用此方法
this.fs.write(
this.destinationPath('text.txt', 'text1.txt'),
Math.random().toString()
)
}
}
模板创建
- 在generators-app目录下，新建templates目录
- 在templates目录下创建文件
- 在模板文件中可以是话用EJS语法，动态输出内容呢
- 模块方法改为如下：
// 通过 templatePath 获取templates目录下指定内容作为模板
const tmpl = this.templatePath('foo.txt');
// 要输出的目标路径
const output = this.destinationPath('foo.txt')
// 模板数据上下文
const context = { title: 'Hello 贾贵山', success: false };
this.fs.copyTpl(tmpl, output, context);
接收用户输入
通过实现 prompting方法,内部返回 this. prompt, 方法接收数组参数组，数组项为对象，对象key为：类型-input，name-最终得到的数据的一个键，message-你想问的话，default-appname，为项目生成目录后作为默认，方法的then，参数为输入的内容
github项目
自动化构建
常用的自动化构建工具
- grunt // 基于临时文件
- gulp // 基于内存完成，同时任务
- fis
Grunt
const done = this.async();
done();
done(false); // 失败时
