1. 写一个前端脚手架-准备工作

开篇

1. 脚手架是一种工具，可以帮助我们搭建工程化项目
2. 脚手架,包含: 1 常用工具包实现交互友好提示界面, 2. 可插拔的插件机制设计 3.可以 DIY 自己的脚手架工具.

1. 学习脚手架收获

1. commander 等工具的使用
2. kkl-cli 项目搭建
3. 实现 Creator, 管理脚手架全声明周期
4. 实现 Generator 类，实现文件生成
5. 实现 PackageManager 类，处理安装环境
6. 了解@vue/cli-service @vue/cli-plugin-*可插拔的插件机制设计

准备工具包

1. commander 等工具的使用

脚手架开发过程中使用了一些工具,获取用户输入，高亮，生成模板等等。

• 1.commander

  • commander 是一个命令好解决方案,通过它可以高速用户脚手架的命令与功能，以及处理用户的输入。
  • 安装：npm install commander

   const {program} = require('commander')
   program.name('cli')
   .description('这是一个神奇的脚手架')
   .version('0.0.1')
   .usage('<command> [options]')
   program.parse()
   // 执行 node main.js --help
  

• 2. chalk
  • 安装: npm install chalk@4.1.2
  • 使用: chalk.blue/chalk.red/chalk.underline/chalk.bgRed

• 3. inquirer

  • 交互式命令行工具，提供了询问操作者问题，获取并解析用户输入，多层级的提示，提示错误回调, 检测用户回答是否合法等能力
  • 安装 npm install inquirer@8.2.5

• 4. ejs

  • 高效的嵌入式 js 模板引擎, 模板可以通过数据进行动态渲染
  • 安装 npm install ejs

  const str = `
     <div>
       <% if(user) {%>
       <span> <%=user.name%> </span>
       <%}else {%>
         <span>登录</span>
       <%}%>
     </div>
   `;
  
  let template = ejs.compile(str, {});
  const data = { user: { name: "Hari" } };
  console.log(template(data));
  

脚手架环境搭建

1. 初始化 package.json

• npm init -y
• 需要添加 bin 信息, bin 是配置命令与脚本路径, 命令名是kkl-cli, 脚本路径是bin/main.js

•   {
      "name": "kkl-cli",
      "version": "1.0.0",
      "description": "一个搭建基础项目环境的配置工具",
      "main": "index.js",
      "bin": {
        "kkl-cli": "bin/main.js"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "Hari.Liu",
      "license": "ISC"
    }
  

• 脚本文件
  • 脚本文件bin/main.js, 用commander来向用户展示脚手架功能, 用chalk来处理高亮显示，该文件主要是处理交互显示，脚手架的核心逻辑放到lib/create.js