一: 什么是脚手架?

1: 一句话理解: 脚手架就是通过简单的命令行创建工程项目的已设定的基本骨架.
2: 常见的前端脚手架:

  • vue.js官方脚手架: vue-cli: @vue/cli(截止目前版本: 4.5.10)
  • react.js官方脚手架: create-react-app(截止目前版本: 4.0.1)
  • angular.js官方脚手架: angular-cli: @angular/cli(截止目前版本: 11.0.7)

3: 基本骨架可能包括:

  • 项目架构目录
  • 一些必须依赖项: eg: rouer, store, axios…
  • 基本结构配置: eg: webpack基本配置
  • 可扩展入口

二: 脚手架的工作原理是什么?

脚手架工作过程:
通过命令行询问用户输入 => 根据用户输入生成结果文件

三: cli(Command Line Interface)

1.cli是啥 ?

cli是一种通过命令行来交互的工具或应用, eg: vue-cli, angular-cli

2.cli能做啥 ?

通过简单的命令询问,根据用户输入生成指定的文件, 代替人工重复劳动,提升开发效率

四: 创建脚手架的方式有哪些(除了特定框架的官方脚手架以外)?

1: yeoman脚手架定制自己的脚手架

1: 安装yeoman工具

  • yarn global add yo
  • yarn global add generator-node

2: 创建脚手架步骤:

  1. 创建一个文件夹: eg: generator-example(generator模块必须以generator开头)
  2. 初始化package.json: yarn init
  3. 添加generator工具: yarn add yeoman-generator
  4. 创建generators/app/index.js文件: 这个index.js文件作为generators的核心入口
  5. 创建模版,模版内容存放地址: generators/app/templates
  6. 将生成器链接到本地的全局范围: yarn link(作用是: 可以在本地用自己创建的包做测试)
  7. 新建一个文件目录,运行生成器: yo example

3: 发布generator到npm

  1. 先在github创建generator名: generator-example.
  2. 创建.gitignore 文件: echo node_modules > .gitignore.
  3. 初始化git仓库: git init
  4. 查看本地仓库状态: git status
  5. 将generator添加到本地仓库: git add .
  6. git commit -m “generator:init”
  7. git remote add origin xxx(github 仓库地址)
  8. git push -u origin master
  9. 发布到npm之前:
    • 首先去npm官网检查下包有没有被占用.
    • 再去npm注册账号
    • 最后在加上npm账号填写相关信息: npm adduser

  10. 发布: npm: npm publish —registry=http://registry.npmjs.org ;

    yarn: yarn publish —registry=https://registry.yarnpkg.com

4: generators/app/index.js核心代码如下:

  1. // 引入yeoman-generator
  2. const Generator = require("yeoman-generator");
  3. module.exports = class extends Generator {
  4.   // yeoman在询问用户环节会自动调用此方法
  5.   // 在此方法中可以调用父类的prompt()方法发出对用户命令对询问
  6.   return this.prompt([
  7.     {
  8.       type: "input",
  9.       name: "name",
  10.       message: "Your project name"
  11.       default: this.appname
  12.     }
  13.   ])
  14.     .then(answers => {
  15.     // 用户的输入的结果
  16.     // answers: { name: "user input value" }
  17.     this.answers = answers;
  18.   })
  19.     // 将模板文件写入目标文件
  20.     writing(){
  21.     const templates = [
  22.       "babel.config.js",
  23.       "package-lock.json",
  24.       "package.json",
  25.       "postcss.config.js",
  26.       "README.md",
  27.       "src/assets/logo.png",
  28.       "src/components/HelloWorld.vue",
  29.       "src/components/timeSelect.vue",
  30.       "src/router/router.js",
  31.       "src/store/mutations.js",
  32.       "src/store/index.js",
  33.       "src/store/actions.js",
  34.       "src/store/modules/home.js",
  35.       "src/views/About.vue",
  36.       "src/App.vue",
  37.       "src/main.js",
  38.       "src/registerServiceWorker.js",
  39.       "public/favicon.ico",
  40.       "public/index.html",
  41.       "public/manifest.json",
  42.       "public/robots.txt"
  43.     ];
  44.     templates.forEach(file => {
  45.       this.fs.copyTpl(
  46.         // 读取模板文件
  47.         this.templatePath(file),
  48.         // 写入目标文件
  49.         this.destinationPath(file),
  50.         // 用户输入的内容
  51.         this.answers,
  52.       )
  53.     })
  54.   }
  55. }


2: node cli定制自己的脚手架

1: 创建一个空文件夹: my-scaffolding
2: 初始化package.json: yarn init
3: 安装依赖ejs,inquirer: yarn add inquirer ejs
4: 跟目录下创建cli.js

  1. #!/usr/bin/env node
  3. // 注意: Node cli入口文件必须这样开头.
  4. // 如果是Linux或者macOS系统的化还需要修改此文件的读写权限
  5. // macOS的具体命令为: sudo chmod -R 755 cli.js
  7. // 脚手架的工作过程:
  8. // 1: 通过命令询问用户问题
  9. // 2: 更具用户输入生成结果文件
  11. // cli.js核心代码如下:
  12. const fs = require("fs");
  13. const path = require("path");
  14. // 捕获用户输入并做读写操作的依赖
  15. const inquirer = require("inquirer");
  16. // 读取模板的引擎
  17. const ejs = require("ejs");
  19. inquirer.prompt([
  20.   {
  21.     type: "input",
  22.     name: "name",
  23.     message: "Project name"
  24.   }
  25. ])
  26. .then(answers => {
  27.   // 根据用户回答生成结果文件
  28.   // console.log(answers)
  30.   // 模版目录
  31.   const templateDir = path.join(__dirname, "templates");
  32.   // 目标目录
  33.   const targetDir = process.cwd();
  34.   // 将模板目录下的文件全部转到目标目录
  36.   fs.readdir(templateDir, (err, files) => {
  37.     if (err) {
  38.       throw err;
  39.     }
  40.     files.forEach(file => {
  41.       // console.log(file)
  42.       // 通过模板赢取渲染文件
  43.       ejs.renderFile(path.join(templateDir, file), answers, (err, result) => {
  44.         if (err) {
  45.           throw err;
  46.         }
  47.         // console.log(result)
  48.         // 将结果写入目标文件路径
  49.         fs.writeFileSync(path.join(targetDir, file), result)
  50.       })
  51.     })
  52.   })
  53. })

5: package.json中引入: {“bin”:”cli.js”},
6: 根目录下创建模板文件夹: templates
7: 将生成器链接到本地的全局范围: yarn link
8: 运行生成器: my-scaffolding
9: 发布与yeoman生成器相同