一、脚手架的本质作用
- 创建项目基础结构、提供项目规范和约定
例如：- 相同的组织结构
- 相同的开发范式
- 相同的模块依赖
- 相同的工具配置
- 相同的基础代码
二、常用脚手架工具
- React 项目 ----> create-react-app
- Vue.js项目 ----> vue-cli
- Angular项目 --->angular-cli
根据信息创建对应的项目基础结构 - Yeoman
- Plop
三、 Yeoman:基于node.js开发的工具模块
node -v
npm -v
yarn -v
yarn global add yo 全局安装yo
yarn global add generator-node 安装generator-node
mkdir my-modul 创建文件夹
yo node 运行
image.png
yeoman.io/generators/
https://yeoman.io/generators/
使用步骤：
- 1、明确需求
- 2、找到合适的Generator
- 3、全局范围安装找到的Generator
- 4、通过Yo运行对应的Generator
- 5、通过命令行交互填写选项
- 6、生成你所需要的项目结构
四、Plop
使用：
- 将plop模块作为项目开发依赖安装
- 在项目根目录下创建一个plopfile.js文件
- 在plopfile.js文件中定义脚手架任务
- 编写用于生成特定类型文件的模板
- 通过plop提供的CLI运行脚手架任务
五、脚手架的工作原理
mkdir sample-scafolding ///通过命令行创建目录
cd sample-scafolding //进入目录
npm install -g yarn //如果有yarn可略过安装
yarn init //初始化package.json文件
打开package.json 文件
配置bin；用于指定cli应用的入口文件
{
"name": "sample-scaffolding",
"version": "1.0.0",
"main": "index.js",
"bin":"cli.js",
"license": "MIT"
}
新建cli.js
执行yarn link 将文件夹名称映射到全局(sample-scaffolding)
后执行文件夹名称(sample-scaffolding)
window7系统出现执行不了的情况，执行yarn global bin 查看返回路径是否在系统环境变量中，如果不存在添加进入PATH中，重启电脑即可，再次运行即可
cli.js
#!/usr/bin/env node
//Node CLI 应用入口文件必须要有这样的文件头
//如果是LINUX 或者ＭＡＣＯＳ系统下还需要修改此文件的读写权限为７５５
//具体就是通过ｃｈｍｏｄ ７５５ ｃｌｉ．ｊｓ 实现修改
// console.log('cli working');
/**
* 通过yarn link 命令链接到全局 就可以直接使用文件夹名称作为命令
* 运行名称sample-scaffolding
* 发起命令行询问需要安装inquirer模块 yarn add inquirer
*/
//脚手架的工作流程：
// 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(answers => {
//根据用户回答的结果生成文件
console.log(answers);
//模板目录
const tmplDir = path.join(__dirname, 'templates')
// 目标目录
const destDir = process.cwd()
// 将模板下的文件全部转换到目标目录
fs.readdir(tmplDir, (err, files) => {
if (err) throw err
files.forEach(file => {
console.log(file);
// 通过模板引擎渲染文件 安装ejs的模板引擎 yarn add ejs
ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
if (err) throw err
console.log(result);
// 将内容写入目标目录
fs.writeFileSync(path.join(destDir, file), result)
}) //渲染这个路径对应的文件
})
})
})
