理解工程化及使用node.js创建一个小型的脚手架工具

一、对工程化的初步认识，结合遇到过的问题说明工程化能够解决的问题或者带来的价值。

1. 想要使用ES6+新特性，但是兼容有问题
2. 想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
3. 想要使用模块化的方式提高项目的可维护性，但是运行环境不能直接支持
4. 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器，有时会出现问题
5. 多人协作开发，无法硬性统一大家的代码风格，从仓库pull回来的代码质量无法保证
6. 部分功能开发时需要等待后端服务接口

二、脚手架除了为我们创建项目结构，还有什么更深的意义

脚手架的本质作用除了为我们创建项目结构，还为我们提供了项目规范和约定。脚手架创建的项目包含相同的组织结构、相同的开发范式、相同的模块依赖、相同的工程配置以及相同的基础代码。脚手架作为一种创建项目初始文件的工具被广泛地应用于新项目或迭代初始阶段。使用工具代替人工操作能够避免人为失误引起的低级错误，同时结合整体前端工程化方案，快速生成功能模块配置、自动安装依赖等，优化了时间成本。在公司中使用同一套脚手架工具创建的项目，使得项目成员更换时，能够马上上手，提高开发效率。

三、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具

1.新建文件夹，命令行运行yarn init初始化package.json文件

mkdir evan-cli 	//新建脚手架目录
cd evan-cli
yarn init	//初始化package.json文件

2.在package.json文件中添加bin字段，用于指定脚手架应用的入口文件，例如：cli.js

{
  "name": "evan-cli",
  "version": "1.0.0",
  "main": "index.js",
  "bin": "cli.js",
  "license": "MIT",
  "dependencies": {
    "ejs": "^3.1.8",
    "inquirer": "^8.2.3"
  }
}

3、根目录下新建templates文件夹用于存放模板文件，例如index.html，用于脚手架执行后自动生成对应文件

4.安装文件所需要的依赖

yarn add inquirer  //命令行交互询问
yarn add ejs //模板引擎

5.在应用中添加刚刚指定的入口文件cli.js

#!/usr/bin/env node
// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过chmod 755 cli.js 实现修改

// console.log("cli working!")

// 脚手架的工作过程：
// 1.通过命令行交互询问用户问题(inquirer模块)
// 2.根据用户回答的结果生成文件

const inquirer = require('inquirer')
const path = require('path')
const fs = require('fs')
const ejs = require('ejs')

// prompt数组每个成员就是命令行发起的问题
inquirer.prompt([
    {
        type: 'input',//输入方式
        name: 'name',//问题返回的键
        message: 'Project name?'//屏幕上给用户的提示信息
    }
])
    .then(anwsers => {
        // console.log(anwsers)   //{name:输入结果}
        // 根据用户回答的结果生成文件

        // 模板目录
        const tmplDir = path.join(__dirname, 'templates')
        // 目标目录 (命令行执行时所在目录 process.cwd())
        const destDir = process.cwd()

        // 将模板下的文件全部转换到目标目录
        fs.readdir(tmplDir, (err, files) => {
            if (err) throw err
            files.forEach(file => {
                // console.log(file)
                // 打印结果为模板目录下的文件

                // 通过模板引擎渲染文件
                ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
                    if (err) throw err
                    // 将结果写入目标文件路径
                    fs.writeFileSync(path.join(destDir, file), result)
                })
            })
        })
    })

6、yarn link 关联到全局

yarn link

7、新建空项目测试脚手架

mkdir test
cd test
evan-cli    //执行自定义脚手架命令

---

实现过程中遇到的几个问题

1、yarn link关联到全局之后，运行自定义脚手架命令不生效，提示不是内部或外部命令

解决方式：
命令行运行 yarn global bin 找到bin目录

右键 我的电脑 》 属性 》高级系统设置 》环境变量 》Path 》将刚刚查询到的bin的路径添加至环境变量中，确定保存

关闭vscode，重新打开终端运行自定义脚手架命令

evan-cli

或者不要使用 yarn link 改用 npm link 就不会出现该问题

---

2、提示不支持require的方式来导入inquirer模块

由于安装的inquirer模块版本过高导致
解决方式：
先卸载之前安装的inquirer模块，再重新安装版本低一点的模块，然后重新运行脚手架

yarn remove inquirer
yarn add inquirer@8.0.0
evan-cli