脚手架的本质作用

创建项目基础结构、提供项目规范和约定

  • 相同的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的基础代码

内容概要：

  • 脚手架的作用
  • 常用的脚手架工具
  • 通用脚手架工具剖析
  • 开发一款脚手架

常见的脚手架工具

  • React → create-react-app
  • Vue.js项目 → vue-cli
  • Angular项目→ angular-cli

根据信息创建对应的项目基础结构

Yeoman：通用型脚手架工具

Plop：用于项目开发过程当中创建特定类型的文件
例如创建一个组件/模块所需要的文件

Yeoman

The web’s scaffolding tool for modern webapps
不同于vue-cli工具Yeoman更像是一个脚手架运行平台，我们可以通过Yeoman搭配不同的generator去创建任何类型的项目，也就是说我们可以通过创建自己的generator去定制属于我们自己的前端脚手架。

Yeoman基础使用

  • 在全局范围安装yo

    1. $ npm install yo --global

  • 安装对应的generator

    1. $ npm install generator-node --global

  • 通过yo运行generator

    1. $ cd path/to/project-dir
    2. $ mkdir my-module
    3. $ yo node

Sub Generator

  1. yo node:cli
  2. yarn link
  3. yarn 
  4. my-module --help

Yeoman使用步骤总结

  1. 明确你的需求
  2. 找到合适的Generator
  3. 全局范围安装找到的Generator
  4. 通过Yo运行对应的Generator
  5. 通过命令行交互填写选项
  6. 生成你所需要的项目结构

自定义Generator

基于Yeoman搭建自己的脚手架

创建Generator模块

Generator本质上就是一个NPM模块
image.png

Plop的基本使用

  • 将plop模块作为项目开发依赖安装
  • 在项目根目录下创建一个plopfile.js文件
  • 在plofile.js文件中定义脚手架任务
  • 编写用于生成特定类型文件的模板
  • 通过Plop提供的CLI运行脚手架任务

脚手架工具的工作原理

启动脚手架工具过后，会自动的去询问预设的问题，根据回答的结果结合模板文件生成对应的项目结构
脚手架实际上就是一个cli应用

  1. // 首先通过命令行mkdir创建一个项目目录
  2. $ mkdir sample-scaffolding
  4. // 进入创建的目录
  5. $ cd sample-scaffolding\
  7. // 初始化package.json
  8. $ yarn init
  10. // 使用vscode打开项目目录
  11. code .

在package.json当中添加bin字段，用于指定cli的入口文件

  1. {
  2.   "name": "sample-scaffolding",
  3.   "version": "0.1.0",
  4.   "main": "index.js",
  5.   "bin": "cli.js",
  6.   "author": "zce <w@zce.me> (https://zce.me)",
  7.   "license": "MIT",
  8.   "dependencies": {
  9.     "ejs": "^2.6.2",
  10.     "inquirer": "^7.0.0"
  11.   }
  12. }

接下来再创建指定的入口文件

  1. #!/usr/bin/env node
  3. // Node CLI 应用入口文件必须要有这样的文件头
  4. // 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
  5. // 具体就是通过 chmod 755 cli.js 实现修改
  7. // 脚手架的工作过程：
  8. // 1. 通过命令行交互询问用户问题
  9. // 2. 根据用户回答的结果生成文件
  11. const fs = require('fs')
  12. const path = require('path')
  13. const inquirer = require('inquirer')
  14. // 载入询问模块
  15. const ejs = require('ejs')
  18. // 发起命令行的询问，接受的是数组参数，数组当中每一个成员就是我们发起的命令行问题
  19. // 通过type指定输入方式，name指定问题返回值的键，message指定屏幕上给用户的提示
  20. inquirer.prompt([
  21.   {
  22.     type: 'input',
  23.     name: 'name',
  24.     message: 'Project name?'
  25.   }
  26. ])
  27. .then(anwsers => {
  28.      // 在then中可以接收到用户的答案
  29.   // console.log(anwsers)
  30.   // 根据用户回答的结果生成文件，即动态的生成项目文件，生成项目文件一般根据模板去生成文件
  31.   // 明确模板目录和目标目录
  33.   // 模板目录
  34.   const tmplDir = path.join(__dirname, 'templates')
  35.   // 目标目录
  36.   const destDir = process.cwd()
  38.   // 将模板下的文件全部转换到目标目录
  39.   fs.readdir(tmplDir, (err, files) => {
  40.     if (err) throw err
  41.     files.forEach(file => {
  42.       // 通过模板引擎渲染文件
  43.       ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
  44.         if (err) throw err
  46.         // 将结果写入目标文件路径
  47.         fs.writeFileSync(path.join(destDir, file), result)
  48.       })
  49.     })
  50.   })
  51. })
  1. // index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title><%= name %></title>
  9. </head>
  10. <body>
  12. </body>
  13. </html>
  1. // style.css
  2. body {
  3.   margin: 0;
  4.   background-color: #f8f9fb;
  5. }

接着进入终端

  1. // 将模块link到全局
  2. $ yarn link
  4. // 通过这个命令，对应的模块就会运行
  5. $ sample-scaffolding
  7. // 安装inquirer模块对用户发起询问
  8. $ yarn add inquirer