脚手架工具

一、脚手架的本质作用

• 创建项目基础结构、提供项目规范和约定
  例如：
  • 相同的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的基础代码

二、常用脚手架工具

• 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)
            }) //渲染这个路径对应的文件
        })
    })

})