脚手架的本质作用是创建项目基础结构、提供项目规范和约定
可解决一下问题：
- 相同的文件组织结构
- 相同的开发范式
- 相同的模块一来
- 相同的工具配置
- 相同的基础代码
常用的脚手架工具
- create-react-app
- vue-cli
- angular-cli
以上三者以自身框架为基础扩展使用功能，官方已经集成了非常多的功能
此外还有： - Yeoman
- Plop
这两种工具比较灵活接下来我们将重点介绍这两种前端脚手架工具
Yeoman
Yeoman 是一种老牌工具，功能更灵活， 可以通过Yeoman定制自己的脚手架工具，我们可以通过理解Yeoman, 研究如何开发自己的脚手架工具.
Yeoman基本使用
- 在全局范围安装yo
$ yarn global add yo
- 安装对应的generator
$ yarn global add generator-node
- 通过yo运行generator
$ yo node
其他功能
如果项目想附加一些其他功能，可以利用Yeoman的Sub Generator的特性
yarn node: cli
// 创建一个模块
// yarn link {模块名}
// 在本项目内 直接运行 {模块名}调用
在mac系统下，
yarn link会有问题存在, 建议先用npm。问题issue
使用步骤总结：
- 明确需求，找到适合的
Generator - 全局范围安装找到的
Generator - 通过
Yo运行相应的Generator， 填写交互选项从而生成需要的项目结构
自定义 Generator
创建Generator本质上就是创建NPM模块
生成器命名必须为 generator-<name>
目录结构为：
image.png
- 创建一个名为
generator-example的文件夹 npm init-
npm install yeoman-generator这里尽量先安装4.0.0版本，否则后面yeoman-environment会有问题 - 然后创建以下目录以及代码
image.png
一个最简单的generator就算完成了，下面就是如何使用 -
npm link关联到全局 (mac 可能需要root权限) - 在其他项目内使用
yo generator，就会生成我们想要的txt文件
依据模板创建文件
当我们碰到要输出一个复杂文件的时候怎么办，那么就可以利用模板来创建。
image.png
首先我们需要创建一个模板文件目录，目录的存放地点是规定的，我们知道即可。模板中的文件支持 EJS 语法。然后我们需要将之前的
index.js文件做一下调整。
image.png
如此我们便达到了依据模板创建文件的方式。
用户动态输入数据
image.png
yo example
? Your project name <MyGenerator>
我们输入后即会得到我们要的结果。
Vue-Generator 自定义一个vue脚手架
-
我们需要一个想要得到的脚手架目录
image.png - 调整我们的
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
)
})
}
}
npm link- 指定新建项目目录下
yo <module name>
发布 Generator
- 将自己的
generator提交到github仓库 -
npm publish发布到npm 仓库。这里需要记住的一点是，taobao源由于不可以写，所需需要改为官方源。eg:npm publish --registry http://registry.npmjs.com - 到
npm官网就可以发现npm i {moduel name}是可用的
实现一个脚手架
准备阶段
mkdir my-cli & cd my-cli-
npm init初始化 - 创建 cli.js 注意开头
#!/usr/bin/env node -
npm install inquirer用于node环境下与用户交互使用 -
npm install ejs用于模板渲染 - 创建模板
templates文件夹，用于存放模板文件 - 以下是cli.js代码
#!/usr/bin/env node
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?",
default: "myCli"
}
]).then(anwsers => {
const templateDir = path.join(__dirname, "templates")
// 目标目录
const destDir = process.cwd()
fs.readdir(templateDir, (err, files) => {
if (err) throw err
files.forEach(file => {
ejs.renderFile(path.join(templateDir, file), anwsers,(err,result) => {
if (err) throw err
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
npm link- 到一个新的文件夹、运行
my-cli，完成！
自此我们前端脚手架的基本创建过程以及脚手架的原理就阐述完了，我们可以再日常中按照自己的开发习惯摸索出一套适合自己或者适合自己团队的脚手架。
