概述
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化，标准化，主要目的是为了提高效率和降低成本。
目前，前端项目越来越复杂化和多元化，但是随着变化而来的就是如下问题：
传统语言或语法有弊病 。虽然ES6及后续版本提出很多解决方案，但是由于环境的支持程度不同，需要进行大量重复性的适配工作。
无法模块化，组件化 。简单来说， 模块化 指的是将一个文件拆分成多个相互独立的小文件，使用的时候再按照一定的规则加载和拼接。 组件化 是指将UI拆分成一个个功能独立单一的结构单元。
存在大量的重复的机械性工作。如项目的构建，发布等。
代码风格不统一，无法保证质量。
严重依赖后端接口支持。
其他问题。
前端工程化为上述问题提供了成熟的解决方案，作为使用者，可以更加关注业务逻辑的实现，也就提高了效率，降低了成本。
脚手架工具
创建项目的第一步就是利用脚手架工具创建项目模版，目前流行的框架均提供了脚手架工具，如react的create-react-app，vue的vue-cli。这些脚手架工具不仅构建了统一的项目结构，同时提供了语法转换、模块化组件化、代码风格检查、单元测试、自动构建部署等方案。
Yeoman是一种开源的脚手架工具，其相比vue-cli专门用于vue项目不同，其更加灵活，可以基于不同的generator生成不同的项目。因此本篇文章将从Yeamon入手，探索如何搭建脚手架。
使用Yeoman创建项目
安装yo： npm install -g yo。
根据想要创建的项目类型使用相应generator，我们创建一个webapp，因此使用generator-webapp：npm install -g generator-webapp（Yeoman提供了generator查找命令，可一键查找安装）。
在项目根文件夹下执行：yo webapp。
创建自定义Generator
使用Yeoman创建自定义脚手架，就是创建generator。
安装generator-generator: npm install generator-generator。
generator-generator是可用于生成generator模版，运行 yo generator 可创建模版项目，项目结构如下：
.
├── generators/
│ └── app/
│ ├── index.js
│ └── templates/
│ └── dummyfile.txt
├── .editorconfig
├── .eslintignore
├── .gitattributes
├── .gitignore
├── .travis.yml
├── .yo-rc.json
├── LICENSE
├── README.md
├── package.json
└── __tests__/
└── app.js
主要逻辑在index.js中，templates文件夹包含所有模版文件。
index.js文件导出一个继承自Generator的类，其包含了一些配置，控制台交互，文件操作等方法。
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
// 执行控制台与用户的交互
prompting() {
const prompts = [
{
type: 'input',
name: 'name',
message: 'What is your Project Name?',
default: 'cus-project'
}
];
return this.prompt(prompts).then(props => {
// 保存用户的输入或者选择
this.props = props;
});
}
// 执行文件操作
writing() {
this.fs.copyTpl(
// 源文件
this.templatePath('dummyfile.txt'),
// 目标文件
this.destinationPath('test.txt'),
this.props
)
}
// 自动安装依赖
install() {
this.npmInstall();
}
};
可以在模版文件中用 <%=name %> 使用用户props。
将编写的包上传到npm，此处由于我们是测试，可以使用：npm link。
在需要创建项目的文件夹下执行yo customeGeneratorName(如我们的项目名为generator-test，此处就应该是test)。
实现自定义脚手架工具
从自定义generator示例中可以看出，实现一个简单的脚手架主要是实现以下两个方面的内容：
1.实现与用户之间的交互（控制台交互）。
2.实现文件的模版替换和复制操作。
在实现自定义脚手架工具之前，得需要了解下面内容：
如何在npm包中添加可执行文件？
在npm包的pakage.json文件中添加bin属性，bin的值是一个对象：
{
// 键表示命令，值表示在终端输入命令后执行的文件
"create-custom": "index.js"
}
当项目中install这个包的时候，命令会注册到全局或者./node_modules/.bin/目录里。
在执行文件的开头需要加上`#!/usr/bin/env node`，否则不会被识别。
inquirer
inquirer用于快速创建交互式命令行。其基本使用如下：
#!/usr/bin/env node
const inquirer = require('inquirer')
// 设置问题
inquirer.prompt([
{
type: 'input', // 问题类型
name: 'name', // 数据属性名
message: '名称', // 提示信息
default: 'Rogan' // 默认值
},
{
type: 'list',
name: 'data',
message: '选择语言',
choices: [
{
name: 'javascript', value: 1
},
{
name: 'go', value: 2
}
]
}
]).then(answers => {
// 处理结果
console.log(answers)
})
问题选项中的类型包含如下：
1.input: 输入文本
2.number: 输入数字
3.confirm: 是否选择 (y/n)
4.list: 选择列表
5.rawlist: 带编号的选择列表
6.expand: 带缩写选择列表
7.checkbox: 多选
8.password: 密码
9.editor:文本编辑器
ejs模版语法
ejs是一种高效的嵌入式JavaScript模板引擎。
let ejs = require('ejs')
ejs.render(`
选择的语言有<%= languages.join(',')%>
`, {
languages: ['php', 'javascript']
})
fs
fs是node内置的模块，用于文件的操作。
通过上面几个工具就可以实现简单的脚手架工具，实现目标：获取用户的选择，根据选择编译模版并生成项目。
在index.js文件中：
#!/usr/bin/env node
const inquirer = require('inquirer')
const fs = require('fs')
const ejs = require('ejs')
const path = require('path')
const choices = [
{ name: 'javascript', value: 1 },
{ name: 'php', value: 2 },
{ name: 'go', value: 3 }
]
// 实现命令行交互
inquirer.prompt([
{
type: 'checkbox',
name: 'lang',
message: '选择语言',
choices
}
]).then(answers => {
// 获取交互内容
const choiced = answers.lang.map(item => {
let lan = choices.find(l => l.value === item)
return lan.name
})
// 获取模版文件夹所在路径
const templatesDir = path.join(__dirname, 'templates')
// 获取当前命令行执行文件夹路径
const destDir = process.cwd()
// 读取模版文件夹下的所有文件
fs.readdir(templatesDir, function (err, files) {
if (err) {
throw err
}
files.forEach(file => {
// 编译模版文件
ejs.renderFile(path.join(templatesDir, file), { lang: choiced }, (err, result) => {
if (err) throw err
// 将编译后的内容拷贝到当前命令行执行文件夹下
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
在模版index.html中：
<html>
<header></header>
<body>
<div>
用户选择： <%= lang.join(',')%>
</div>
</body>
</html>
使用plop
和Yeoman不同，plop是一个在项目内使用的，可以快速创建指定格式文件的脚手架工具，如在vue编程过程中，每次创建.vue文件，均需要在文件中手动输入template，script，style三个节点，可以利用此工具一键生成文件，减少大量的重复工作。
使用步骤如下：
安装依赖包 npm install --save-dev plop
在根目录下创建plopfile.js文件，该文件可用于注册命令。
module.exports = function (plop) {
// 设置生成器
plop.setGenerator("create-vue-file", {
description: "创建vue模版文件",
// 命令行交互
prompts: [
{
type: 'input', // 交互类型
name: 'name', // 参数名称
message: '请输入vue文件名称', // 交互提示
default: 'VueFile'
},
{
type: 'input',
name: 'path',
message: '请输入文件创建目录'
}
],
// 交互完成后执行的动作
actions: [
{
type: 'add', // 动作类型: 表示添加文件
path: '{{ path }}/{{ name }}.vue', // 根据用户输入获取文件路径
templateFile: 'templates/vue.hbs' // 模板文件地址， 使用hbs文件
}
] // 执行操作
})
}
添加模版文件，在templates文件加下添加vue.hbs模版文件
<template>
<div class="{{name}}-container">
</div>
</template>
<script>
export default {
name: {{ name }}
}
</script>
<style>
.{{name}}-container {
}
</style>
添加npm scripts
在package.json文件的scripts属性下添加："plop": "plop"
执行命令
在命令行执行: npm run plop create-vue-file。
根据提示输入文件名和文件路径，最终会生成文件如下：
如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 截图发给我看一下即可免费获取，希望能够对你们有所帮助。
网友评论