概述
工程化概述
工程化之前主要面临的问题
- 传统语言或语法的弊端
- 无法使用模块化/组件化
- 重复的机械式工作
- 代码风格不统一、质量不保证
- 依赖后端服务接口支持
- 整体依赖后端项目
工程化表现
一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】
一些成熟的工程化集成：
- create-react-app
- vue-cli
- angular-cli
- gatsby-cli
脚手架工具
前端工程化的发起者
脚手架的本质作用
创建项目基础结构、提供项目规范和约定
- 相同的组织结构
- 相同的开发范式
- 相同的模块依赖
- 相同的工具配置
- 相同的基础代码
以Android Studio为例，在创建一个项目的过程就是一个脚手架的工作流程。
前端脚手架
常用的脚手架
React.js项目 =》 create-react-app
vue.js项目 =》 vue-cli
Angular项目 =》 angular-cli
通用型脚手架工具 =》Yeoman（可以根据一套模板生成一个对应的项目结构）
创建一个组件模块所需要的文件 =》Plop
Yeoman
用于创造现代化web应用的脚手架工具。相比与vue-cli， create-react-app更通用。我们可以根据Yeoman去搭配不同的Generator去创建任何类型的项目，也就是说我们可以通过创建自己的generator从而去定制属于我们自己的前端脚手架。同时yeoman的优点也是他的缺点，因为它过于通用不够专注。
Yeoman的基本使用
常规使用步骤：
- 明确需求
- 找到合适的Generator
- 全局范围安装找到的Generator
- 通过Yo运行对应的Generator
- 通过命令行交互填写选项
- 生成你所需的项目结构
例如安装一个网页应用
7. npm i -g generator-webapp
8. 安装完成之后通过yeoman去运行这个generator yo webapp
最终就可以在项目目录下得到一个web应用的基本结构
Sub Generator
有时候我们并不需要创建完整的项目结构，可能只是在以后的项目之上创建一些特定类型来的文件。比如在已有的项目之上创建一些配置文件，如果自己手写的化，可能会出错，但用生成器生成的化会很方便。类似这样的需求可以通过Sub Generator实现。在项目目录下去运行一个特定的sub generator命令去生成对应的文件。
例如：使用Generator-node里面所提供的一个子集的生成器叫cli的生成器去帮我们生成一个cli应用所需要的一些文件，让我们的模块变成cli应用。（cli：Command Line Interface(命令行接口)，该程序允许用户键入指示计算机执行特定任务的文本命令。）
- yo node:cli 运行Sub Generator的方式是在原有的generator的后面跟上冒号sub generator的名字
- 会提示是否要重写package.json 输入y
- 完成之后会出现
生成lib/cli.js提供了cli应用的基础代码结构
- 有了这些就可以将模块作为一个全局的命令行模块去使用
- npm install
- 通过 npm link 到全局范围 (在本地开发npm模块的时候，我们可以使用npm link命令，将npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试)
- 之后就可以通过模块的名字去运行刚刚加入进去的模块了
自定义Generator
基于Yeoman搭建自己的脚手架
创建Generator模块（Generator本质就是一个npm模块）
Generator有特定结构
除了特定结构还有一个和普通的npm不同的是yeomen的generator的命名方式必须是generator-,如果在开发的时候没有使用这样格式的名称，那么yeoman在后续工作的时候就无法找到你所提供的这个生成器模块
- npm init 初始化一个项目
- npm i yeoman-generator 这个模块提供了一些生成器的基类，在这些基类中提供了一些工具函数，让我们可以在创建生成器的时候更加便捷
- 然后再项目中创建generatosappindex.js
- yo sample
根据模版创建文件
- 在项目目录下app文件夹下创建一个templatesfoo.txt
- 运行 yo sample
相对于手动创建每一个文件，模版的方式大大的提高了效率
接收用户输入
- 创建一个bar.html
- yo sample
- 生成文件
vue Generator案例
-
把需要创建的文件拷贝到templates文件夹下
-
index.js
const Generator = require('yeoman-generator') module.exports = class extends Generator { prompting () { return this.prompt([ { type: 'input', name: 'name', message: 'Your project name', default: this.appname } ]) .then(answers => { this.answers = answers }) } writing () { // 把每一个文件都通过模板转换到目标路径 const templates = [ '.browserslistrc', '.editorconfig', '.env.development', '.env.production', '.eslintrc.js', '.gitignore', 'babel.config.js', 'package.json', 'postcss.config.js', 'README.md', 'public/favicon.ico', 'public/index.html', 'src/App.vue', 'src/main.js', 'src/router.js', 'src/assets/logo.png', 'src/components/HelloWorld.vue', 'src/store/actions.js', 'src/store/getters.js', 'src/store/index.js', 'src/store/mutations.js', 'src/store/state.js', 'src/utils/request.js', 'src/views/About.vue', 'src/views/Home.vue' ] templates.forEach(item => { // item => 每个文件路径 this.fs.copyTpl( this.templatePath(item), this.destinationPath(item), this.answers ) }) } } -
把需要动态传入的以模板引擎的方式转换
-
运行Yeman生成器命令
发布Generator
- 将项目源代码去托管到一个公开的源代码仓库上面
- npm publish
- 有了这个模块后，可以通过npm的方式安装，然后通过Yeoman去使用
Plop
一个小而美的脚手架工具
Plop的基本使用
- 本地安装 npm install plop–save-dev
- 在package.json中配置scripts命令，因为在安装plop模块的时候，plop提供了一个cli程序，所以可以在package.json里面注册这个程序
"scripts": { "plop": "plop" }, - 配置plopfile.js
// Plop 入口文件，需要导出一个函数 // 此函数接收一个 plop 对象，用于创建生成器任务 module.exports = plop => { plop.setGenerator('component', { // setGenerator 接收两个参数 1：生成器名字，2：生成器的配置选项 description: 'create a component', // 生成器描述 prompts: [ // 工作的时候发出的问题 { type: 'input', // 输入方式 name: 'name', // 问题返回值的键 message: 'component name', // 屏幕上给出的提示 default: 'MyComponent' // 默认答案 } ], actions: [ // m命令行交互过后需要执行的动作 { type: 'add', // 代表添加文件 // 动作的类型 path: 'src/components/{{name}}/{{name}}.js', // 添加的文件会被添加到的具体的路径（使用{{}}插值表达式插入命令行中得到的输入数据 templateFile: 'plop-templates/component.hbs' // 本次添加的文件的模板文件是什么 }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.css', templateFile: 'plop-templates/component.css.hbs' }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.test.js', templateFile: 'plop-templates/component.test.hbs' } ] }) }- 编写模板
plop采用的是handlebars.js模版引擎来操作，通过预编译.hbs文件来构建Web模板。
在项目下创建plop-templates文件夹存放模板文件
- 编写模板
- 编译plop
npm run plop - 生成如下文件
脚手架工具的工作原理
通过nodejs去开发一个小型的脚手架工具
脚手架工具其实就是一个node cli应用，创建脚手架工具实际上就是创建一个node cli应用
- 初始化一个package.json npm -init -y
- 在package,json中添加一个bin字段用于去指定cli应用的入口文件
- 添加cli.js
#!/usr/bin/env node
// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
// 脚手架的工作过程：
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer') // 询问用户动作
const ejs = require('ejs')
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name?'
}
])
.then(anwsers => {
// console.log(anwsers)
// 根据用户回答的结果生成文件
// 模板目录
const tmplDir = path.join(__dirname, 'templates')
// 目标目录
const destDir = process.cwd()
// 将模板下的文件全部转换到目标目录
fs.readdir(tmplDir, (err, files) => {
if (err) throw err
files.forEach(file => {
// 通过模板引擎渲染文件
ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
if (err) throw err
// 将结果写入目标文件路径
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
-
添加模板。创建templates文件夹
-
需要安装询问用户动作的模块inquirer，和模板引擎ejs
-
npm link 链接到全局
以上就是关于前端工程化的部分笔记啦~ 由于之前完全没有过接触，所以现在还是有点凌乱，还需要再次整理一下。。
最后
以上就是冷静橘子为你收集整理的前端工程化（上）之 脚手架工具的全部内容，希望文章能够帮你解决前端工程化（上）之 脚手架工具所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复