前端工程化解决的主要问题
1、传统语言或语法的弊端
2、无法使用模块化/组件化
3、重复的机械式工作
4、代码风格统一、质量保证
5、依赖后端服务接口支持
6、整体依赖后端项目
前端工程化表现
（1）一切可以提高效率、降低成本、质量保证为目的的手段都属于【工程化】
（2）工程化 ≠ 某个工具
可以大致分成5个部分：
- 脚手架工具开发（自动创建项目结构、提供项目规范和约定）
- 自动化构建系统
- 模块化打包
- 项目代码规范化
- 自动化部署
脚手架工具开发（自动创建项目结构、提供项目规范和约定）
Yeoman 【通用的脚手架工具，可以用来制作自己的脚手架工具】
plop 【一般不会用plop去创建项目，而是用它创建项目中的文件】
create-react-app 【用来创建recat项目的脚手架】
vue-cli 【用来创建Vue项目的脚手架】
angular-cli 【用来创建angular项目的脚手架】
Yeoman 是基于nodejs开发的工具模块
提前安装好nodejs
Yeoman的基本使用
- 在电脑全局范围安装Yeoman，安装成功后Yeoman的命令操作符就是yo
npm install yo --global // or yarn global add yo
-
安装完成后可以看到安装路径：
image 在电脑全局范围安装对应的generator，不同的generator会生成不同的项目结构
npm install generator-node --global // or yarn global add generator-node
-
安装完成后可以看到安装路径：
image 通过yo命令运行对应的generator
// 1、创建一个文件夹
// 2、在文件内运行 yo node
// 3、yo node 运行的就是generator-node，因为在运行的时候不需要写generator-
yo node
Yeoman的基本使用步骤
- 1、明确你的需求
- 2、找到合适的Generator
- 3、全局范围安装找到的Generator
- 4、通过yo命令运行对应的Generator
- 5、通过命令行交互填写选项
- 6、生成你所需要的项目结构
自定义Generator，基于Yeoman搭建自己的最基本的脚手架测试
1、generator本质上就是一个npm模块
2、Yeoman的generator模块的命名必须是：generator-<模块名>
3、创建一个文件夹：generator-self
4、进入generator-self文件，创建 generators文件夹
5、进入generator-self文件，打开命令行工具，执行 npm init
6、然后执行 npm install yeoman-generator --save
7、进入generators文件，创建 app文件夹
8、进入app文件，创建 index.js文件夹
9、在index.js文件内执行
// Yeoman Generator 咋工作的时候会自动调用我们在此类中定义的一些声明周期的方法
// 我们在这些方法中可以调用父类提供的一些方法，实现一些共功能，例如，文件写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
writing() {
// 写入文件，this指向的是父类【yeoman-generator】
this.fs.write(this.destinationPath('temp.txt'), '第一次实现基本的generator')
}
}
10、进入generator-self文件，打开命令行工具，执行 npm link,创建全局软连接
11、在generator-self同级文件夹下，新建一个文件夹 test
12、进入test文件夹，打开命令行工具，执行 yo self ,就可以用刚才自己创建的generator-self来创建项目了
13、yo self 运行的就是generator-self，因为在运行的时候不需要写generator-
14、不想使用generator-self 时可以执行 npm unlink generator-self 解除全局软连接
根据模板创建文件
1、进入app文件，创建 templates文件夹
2、进入templates文件，创建 a.txt文件
这是根据模板创建的文件
可以使用ejs模板 来输出数据
<%= name %>
<% if(name === 'haha'){%>
name是haha，可以显示数据
<% } %>
3、进入index.js文件内，进行如下修改：
// Yeoman Generator 咋工作的时候会自动调用我们在此类中定义的一些声明周期的方法
// 我们在这些方法中可以调用父类提供的一些方法，实现一些共功能，例如，文件写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
writing() {
// 写入文件，this指向的是父类【yeoman-generator】
// this.fs.write(this.destinationPath('temp.txt'), '第一次实现基本的generator')
// 通过模板方式写入文件到指定目录
// 模板文件路径
const tem = this.templatePath('a.txt')
// 输出文件路径
const output = this.destinationPath('a.txt')
// 模板数据上下文
const context = { name: 'haha' }
// 通过模板方式写入文件到指定目录
this.fs.copyTpl(tem, output, context)
}
}
4、在generator-self同级文件夹下，新建一个文件夹 test
5、进入test文件夹，打开命令行工具，执行 yo self ,就可以用刚才自己创建的generator-self来创建项目了
让用户输入信息，来生成对应的模板，从而创建项目结构
1、进入index.js文件内，进行如下修改：
// Yeoman Generator 咋工作的时候会自动调用我们在此类中定义的一些声明周期的方法
// 我们在这些方法中可以调用父类提供的一些方法，实现一些共功能，例如，文件写入
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
prompting() {
// yeoman在询问用户的环节，会调用次方法
// 调用父类的prompt方法，发出对用户的命令询问
return this.prompt([
{
type: 'input', // 事件类型
name: 'name', // 用户输入的项目名称
message: '项目名称', // 提示框内容
default: this.appname // 默认的项目名称
}
]).then(result => {
this.result = result
})
}
writing() {
// 写入文件，this指向的是父类【yeoman-generator】
// this.fs.write(this.destinationPath('temp.txt'), '第一次实现基本的generator')
// 通过模板方式写入文件到指定目录
// 模板文件路径
const tem = this.templatePath('a.txt')
// 输出文件路径
const output = this.destinationPath('a.txt')
// 模板数据上下文
// const context = { name: 'haha' }
const context = this.result
// 通过模板方式写入文件到指定目录
this.fs.copyTpl(tem, output, context)
}
}
2、在generator-self同级文件夹下，新建一个文件夹 test
3、进入test文件夹，打开命令行工具，执行 yo self ,就可以用刚才自己创建的generator-self来创建项目了
发布自己创建的generator-self脚手架
1、把自己创建的generator-self脚手架发布到github上
2、进入generator-self文件夹下，打开命令行工具，运行命令： npm publish
在运行npm publish的时候会报错，可能是因为使用的淘宝npm镜像，因为这个镜像是只读的，所以这里publish的时候需要指明一下镜像地址
您首先执行下 npm adduser ，输入您相应的 Username 、 Password 、 Email: (this IS public) ，关键的一步来了!
Logged in as 您的Username on https://registry.npmjs.org/.
如果 on 后面不是 https://registry.npmjs.org/ ，而是其他的镜像，比如我们大家常见的淘宝镜像：
http://registry.npm.taobao.org/
那么您首先替换成原来的，替换成原来执行如下命令：
npm config set registry https://registry.npmjs.org/
最后，替换完毕再执行 npm adduser 、 npm publish ，这样应该就ok了！
yarn命令执行：
yarn publish --registry=https://registry.yarnpkg.com
Plop简介：一个小而美的脚手架工具
重复创建相同的文件的时候，就可以用到plop脚手架工具
使用基本步骤：
相关连接：https://blog.csdn.net/qq_34875090/article/details/108105853
脚手架的工作原理
脚手架实际上就是一个node cli 应用
通过nodejs 来弄一个脚手架的基本demo
// 新建一个文件夹：demo-cli
// 进入文件夹：打开命令行工具，运行：npm init
// 进入package.json文件内，加入一个代码： "bin": "cli.js",：
// 需要安装的npm包有
// npm install inquirer --save
// npm install inquirer --ejs
// 在根目录demo-cli下创建一个cli.js文件，cli.js文件代码如下:
#!/usr/bin/env node
// Node CLI 的应用入口文件必须要有一个文件头 #!/usr/bin/env node
// 如果是linux macos 还粗腰修改次文件的读写权限为755，这样这个文件才可以作为cli文件的入口
// 具体就是通过chmod 755 cli.js 实现修改
// 脚手架的工作过程
// 1、通过命令行交互，提示用户输入信息
// 2、根据用户输入的信息，生成对应的文件
const path = require('path')
const fs = require('fs')
const inquirer = require('inquirer')
const ejs = require('ejs')
inquirer.prompt([
// 1、通过命令行交互，提示用户输入信息
{
type: 'input',
name: 'name',
message: 'Project Name:'
}
])
.then((answer) => {
// 2、根据用户输入的信息，生成对应的文件
// 模板目录
const templete = path.join(__dirname, 'templates')
// 文件生成的目录
const output = process.cwd()
// 读取模板目录下的所有文件
fs.readdir(templete, (err, result) => {
if (err) throw err
// console.log(result) // [ 'a.html' ]
result.forEach((item) => {
ejs.renderFile(path.join(templete, item), answer, (err, result) => {
if (err) throw err
console.log(result)
// 把文件写入到 文件生成的目录
fs.writeFile(path.join(output, item), result, (err, result) => {
if (err) throw err
})
})
})
})
})
// 在根目录demo-cli下创建一个templates文件夹，
// 内部创建一个a.html文件,a.html文件代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= name %></title>
</head>
<body>
<%= name%>
</body>
</html>
// 在 demo-cli文件夹内，打开命令行工具，运行 npm link 在自己电脑上创建一个全局软连接
// 在 demo-cli文件夹的同级目录下，新建一个文件夹test
// 在 test文件夹内，打开命令行工具，运行 demo-cli ，就可以实现，用自己写的demo-cli脚手架创建demo了
