「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）

一 前言

读完这篇文章你可能会学到哪些知识？

①node实现终端命令行 ②终端命令行交互③深copy整个文件夹 ④nodejs执行终端命令 如 npm install⑤建立子进程通信
⑥webpack底层操作，启动webpack,合并配置项⑦编写一个plugin,理解各阶段⑧require.context实现前端自动化

1 实现效果展示

项目效果

mycli creat 创建项目

mycli start 运行项目

mycli build 打包项目

体验步骤

我们在这边文章里面用的是mycli ，但是我并没有上传项目到npm,但是这篇文章的技术是笔者之前的一个脚手架原型，感兴趣的同学本地下载可以体验效果。

全局下载脚手架rux-cli

windows

npm install rux-cli -g 

mac

sodu npm install rux-cli -g 

一条命令创建项目，安装依赖，编译项目，运行项目。

rux create 

2 设置目标

设置目标，分解目标

我们希望用一条命令行,实现项目创建，依赖下载,项目运行，依赖收集等众多流程。如果一口气设计整个功能，可能会感到脑袋一片空白，所以我们要学会分解目标。实际纵览整个流程，主要分为 创建文件阶段 ， 构建，集成webpack阶段 ， 运行项目阶段 。梳理每个阶段我们需要做的事情。

二 创建文件阶段

1 终端命令行交互

① node 修改 bin

我们期望像vue-cli那样 ，通过自定义的命令行vue create，开始创建一个项目，首先能够让程序终端识别我们的自定义指令，我们首先需要修改bin。

例子：

mycli create 

我们希望的终端能够识别mycli ,然后通过 mycli create创建一个项目。实际上流程大致是这样的通过mycli可以指向性执行指定的node文件。接下来我们一起分析一下具体步骤。

执行终端命令号，期望结果是执行当前的node文件。

建立工程

如上图所示我们在终端执行命令行的时候，统一走bin文件夹下面的 mycli.js文件。

mycli.js文件

#!/usr/bin/env node
'use strict';
console.log('hello,world')

然后在package.json中声明一下bin。

{
  "name": "my-cli",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "bin": {
    "mycli": "./bin/mycli.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.0.0",
    "commander": "^5.1.0",
    "inquirer": "^7.1.0",
    "which": "^2.0.2"
  }
}

万事俱备，为了在本地调试，my-cli文件夹下用npm link,如果在mac上需要执行 sudo npm link

然后我们随便新建一个文件夹，执行一下 mycli。看到成功打印hello,world,第一步算是成功了。接下来我们做的是让node文件(demo项目中的mycli.js)能够读懂我们的终端命令。比如说 mycli create 创建项目；
mycli start运行项目;
mycli build 打包项目；
为了能够在终端流利的操纵命令行 ，我们引入 commander 模块。

② commander -nodejs终端命令行

为了能在终端打印出花里胡哨的颜色，我们引入chalk库。

const chalk = require('chalk')
const colors = [ 'green' , 'blue' , 'yellow' ,'red'  ]
const consoleColors = {}
/* console color */
colors.forEach(color=>{
    consoleColors[color] = function(text,isConsole=true){
         return isConsole ? console.log( chalk[color](text) ) : chalk[color](text)
    }
})
module.exports = consoleColors

接下来需要我们用 commander 来声明的我们终端命令。

简介commander常用api

Commander.js node.js命令行界面的完整解决方案,受 Ruby Commander启发。
前端开发node cli 必备技能。

1 version版本

var program = require('commander');
 
program
    .version('0.0.1')
    .parse(process.argv);  
#执行结果：
node index.js -V
0.0.1

2 option选项

使用.option()方法定义commander的选项options,示例：.option(’-n, --name [items2]’, ‘name description’, ‘default value’)。

program
  .option('-d, --debug', 'output extra debugging')
  .option('-s, --small', 'small pizza size')
program.parse(process.argv)
if( program.debug ){
    blue('option is debug')
}else if(program.small){
    blue('option is small')
}

终端输入

mycli -d

终端输出

3 commander自定义指令(重点)

作用：添加命令名称，
示例：.command('add

1 命令名称<必须>：命令后面可跟用 <> 或 [] 包含的参数；命令的最后一个参数可以是可变的，像实例中那样在数组后面加入 … 标志；在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中。

2 命令描述<可省略>：如果存在，且没有显示调用 action(fn) ，就会启动子命令程序，否则会报错
配置选项<可省略>：可配置noHelp、isDefault等。

使用commander，添加自定义命令

因为我们做的是脚手架，最基本的功能，创建项目，运行项目(开发环境),打包项目(生产环境)，所以我们添加三个命令，代码如下：

/* mycli create 创建项目 */
program
    .command('create')
    .description('create a project ')
    .action(function(){
        green('   '+'欢迎使用mycli,轻松构建react ts项目～')
    })

/* mycli start 运行项目 */
program
.command('start')
 .description('start a project')
 .action(function(){
    green('--------运行项目-------')
 })

/* mycli build 打包项目 */
program
.command('build')
.description('build a project')
.action(function(){
    green('--------构建项目-------')
})

program.parse(process.argv)

效果

mycli create

第一步算是完成了。

③ inquirer模块命令行交互

我们期望像vue-cli或者dva-cli再或者是taro-cli一样，实现和终端的交互功能。这就需要另外一个 nodejs模块 inquirer。Inquirer.js提供用户界面和查询会话。

上手：

var inquirer = require('inquirer');
inquirer
  .prompt([
    /* 把你的问题传过来 */
  ])
  .then(answers => {
    /* 反馈用户内容 */
  })
  .catch(error => {
    /* 出现错误 */
  });

由于我们做的是react脚手架，所以我们和用户交互问题设定为，是否创建新的项目？(是/否) -> 请输入项目名称？(文本输入) -> 请输入作者？(文本输入) -> 请选择公共管理状态？(单选) mobx 或 redux。上述prompt第一个参数需要对这些问题做基础配置。我们的 question 配置大致是这样

const question = [
   {
        name:'conf',              /* key */
        type:'confirm',           /* 确认 */
        message:'是否创建新的项目？' /* 提示 */
    },{
        name:'name',
        message:'请输入项目名称？',
        when: res => Boolean(res.conf) /* 是否进行 */
    },{
        name:'author',
        message:'请输入作者？',
        when: res => Boolean(res.conf)
    },{
        type: 'list',            /* 选择框 */
        message: '请选择公共管理状态？',
        name: 'state',
        choices: ['mobx','redux'], /* 选项*/
        filter: function(val) {    /* 过滤 */
          return val.toLowerCase()
        },
        when: res => Boolean(res.conf)
    }
]

然后我们在 command('create') 回调 action()里面继续加上如下代码。

program
    .command('create')
    .description('create a project ')
    .action(function(){
        green('   '+'欢迎使用mycli,轻松构建react ts项目～')
        inquirer.prompt(question).then(answer=>{
            console.log('answer=', answer )
        })
    })

运行

mycli create 

效果如下

接下来我们要做的是，根据用户提供的信息copy项目文件，copy文件有两种方案，第一种项目模版存在脚手架中，第二种就是向github这种远程拉取项目模版，我们在这里用的是第一种方案。我们在脚手架项目中新建template文件夹。放入react-typescript模版。接下来要做的是就是复制整个template项目模版了。

2 深拷贝文件

由于我们的template项目模版，有可能是深层次的 文件夹 -> 文件 结构，我们需要深复制项目文件和文件夹。所以需要node中原生模块fs模块来助阵。fs大部分api是异步I/O操作,所以需要一些小技巧来处理这些异步操作，我们稍后会讲到。

1 准备工作： 理解 异步I/O 和 fs模块

笔者看过一些朴灵《深入浅出nodejs》，里面有一段关于异步I/O描述。

const fs = require('fs')
fs.readFile('/path',()=>{
    console.log('读取文件完成')
})
console.log('发起读取文件')

'发起读取文件’是在’读取文件完成’之前输出的，说明用readFile读取文件过程是异步的，这样的意义在于，在node中，我们可以在语言层面很自然地进行并行的I/O操作。每个调用之间无须等待之前的I/O调用结束，在编程模型上可以极大提升效率。回到我们的脚手架项目上来，我们需要一次性大规模读取模板文件，复制模版文件，也就是会操作很多上述所说的异步I/O操作。

我们需要nodejs 中 fs模块，实现拷贝整个项目功能。相信对于使用过nodejs开发者来说，fs模块并不陌生，基本上涉及到文件操作的功能都有用到，由于篇幅的原因，这里就不一一讲了，感兴趣的同学可以看看 nodejs中文文档-fs模块基础教程

2 递归复制项目文件

实现思路

思路：

① 选择项目模版 ：首先解析在第一步inquirer交互模块下用户选择的项目配置，我们项目有可能有多套模版。因为比如上述选择状态管理mobx或者是redux，再比如说是选择js项目，或者是ts项目，项目的架构和配置都是不同的，一套模版满足不了所有情况。我们在demo中，就用了一种模版,就是最常见的react ts项目模版，这里指的就是在template文件下的项目模版。

② 修改配置：对于我们在inquirer阶段，提供的配置项，比如项目名称，作者等等，需要我们对项目模版单独处理,修改配置项。这些信息一般都存在package.json中。

③ 复制模版生成项目： 选择好了项目模版，首先我们遍历整个template文件夹下面所有文件，判断子文件文件类型，如果是文件就直接复制文件，如果是文件夹，创建文件夹，然后递归遍历文件夹下子文件，重复以上的操作。直到所有的文件全部复制完成。

④ 通知主程序执行下一步操作。

我们在mycli项目src文件夹下面创建create.js专门用于创建项目。废话不多说，直接上代码。

核心代码

const create = require('../src/create')

program
    .command('create')
    .description('create a project ')
    .action(function(){
        green('   '+'欢迎使用mycli,轻松构建react ts项目～')
        /* 和开发者交互，获取开发项目信息 */
        inquirer.prompt(question).then(answer=>{
           if(answer.conf){
              /* 创建文件 */
              create(answer)
           }
        })
    })

接下来就是第一阶段核心：

第一步：选择模版

create方法

module.exports = function(res){
    /* 创建文件 */
    utils.green('------开始构建-------')
    /* 找到template文件夹下的模版项目 */
    const sourcePath = __dirname.slice(0,-3)+'template'
    utils.blue('当前路径:'+ process.cwd())
    /* 修改package.json*/
    revisePackageJson( res ,sourcePath ).then(()=>{
        copy( sourcePath , process.cwd() ,npm() )
    })
}

在这里我们要弄明白两个路径的意义：

__dirname:Node.js中,__dirname总是指向被执行 js 文件的绝对路径,所以当你在 /d1/d2/mycli.js文件中写了__dirname, 它的值就是/d1/d2。

process.cwd() : process.cwd() 方法会返回 Node.js 进程的当前工作目录。

第一步实际很简单，选择好我们要复制文件夹的路径，然后根据用户信息进行修改package.json

第二步：修改配置

模版项目中的package.json，我们这里简单的做一个替换，将 demoName 和 demoAuthor 替换成用户输入的项目名称和项目作者。

{
  "name": "demoName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "mycli start",
    "build": "mycli build"
  },
  "author": "demoAuthor",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^16.9.25",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    //...更多内容
  },
}

revisePackageJson修改package.json

function revisePackageJson(res,sourcePath){
    return new Promise((resolve)=>{
      /* 读取文件 */
        fs.readFile(sourcePath+'/package.json',(err,data)=>{
            if(err) throw err
            const { author , name  } = res
            let json = data.toString()
            /* 替换模版 */
            json = json.replace(/demoName/g,name.trim())
            json = json.replace(/demoAuthor/g,author.trim())
            const path = process.cwd()+ '/package.json'
            /* 写入文件 */
            fs.writeFile(path, new Buffer(json) ,()=>{
                utils.green( '创建文件：'+ path )
                resolve()
            })
        })
    })
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HBZtOOX-1611108743168)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d89889e9b394cfcb1ef3ae88f90e517~tplv-k3u1fbpfcp-watermark.image)]

效果如上所示,这一步实际流程很简单，就是读取template中的package.json文件，然后根据模版替换，接下来重新在目标目录中生成package.json。接下来revisePackageJson返回的promise中进行真正的复制文件流程。

第三步：复制文件

let fileCount = 0  /* 文件数量 */
let dirCount = 0   /* 文件夹数量 */
let flat = 0       /* readir数量 */
/**
 * 
 * @param {*} sourcePath   //template资源路径
 * @param {*} currentPath  //当前项目路径
 * @param {*} cb           //项目复制完成回调函数 
 */
function copy (sourcePath,currentPath,cb){
    flat++
    /* 读取文件夹下面的文件 */
    fs.readdir(sourcePath,(err,paths)=>{
        flat--
        if(err){
            throw err
        }
        paths.forEach(path=>{
            if(path !== '.git' && path !=='package.json' ) fileCount++
            const  newSoucePath = sourcePath + '/' + path
            const  newCurrentPath = currentPath + '/' + path
            /* 判断文件信息 */
            fs.stat(newSoucePath,(err,stat)=>{
                if(err){
                    throw err
                }
                /* 判断是文件，且不是 package.json  */
                if(stat.isFile() && path !=='package.json' ){
                    /* 创建读写流 */
                    const readSteam = fs.createReadStream(newSoucePath)
                    const writeSteam = fs.createWriteStream(newCurrentPath)
                    readSteam.pipe(writeSteam)
                    color.green( '创建文件：'+ newCurrentPath  )
                    fileCount--
                    completeControl(cb)
                /* 判断是文件夹，对文件夹单独进行 dirExist 操作 */    
                }else if(stat.isDirectory()){
                    if(path!=='.git' && path !=='package.json' ){
                        dirCount++
                        dirExist( newSoucePath , newCurrentPath ,copy,cb)
                    }
                }
            })
        })
    })
}

/**
 * 
 * @param {*} sourcePath  //template资源路径
 * @param {*} currentPath  //当前项目路径
 * @param {*} copyCallback  // 上面的 copy 函数
 * @param {*} cb    //项目复制完成回调函数 
 */
function dirExist(sourcePath,currentPath,copyCallback,cb){
    fs.exists(currentPath,(ext=>{
        if(ext){
            /* 递归调用copy函数 */
            copyCallback( sourcePath , currentPath,cb)
        }else {
            fs.mkdir(currentPath,()=>{
                fileCount--
                dirCount--
                copyCallback( sourcePath , currentPath,cb)
                color.yellow('创建文件夹：'+ currentPath )
                completeControl(cb)
            })
        }
    }))
}

这一步的流程大致是这样的，首先用 fs.readdir读取template文件夹下面的文件，然后通过 fs.stat读取文件信息，判断文件的类型，如果当前文件类型是文件类型，那么通过读写流fs.createReadStream和fs.createWriteStream创建文件；如果当前文件类型是文件夹类型，判断文件夹是否存在，如果当前文件夹存在，递归调用copy复制文件夹下面的文件,如果不存在，那么重新新建文件夹，然后执行递归调用。这里有一点注意的是，由于我们对package.json单独处理，所以这里的一切文件操作应该排除package.json。因为我们要在整个项目文件全部复制后，进行自动下载依赖等后续操作。

小技巧：三变量计数法控制异步I/O操作

上面的内容讲到了fs模块基本都是异步I/O操作，而且我们的复制文件是深层次递归调用，这就有一个问题，如何才能够判断所有的文件都已经复制完成呢 ，对于这种层次和数量都是未知的文件结构，很难通过promise等异步解决方案来处理。这里我们没有引入第三方异步流程库，而是巧妙的运用变量计数法来判断是否所有文件均以复制完毕。

变量一flat: 每一次copy函数调用,会执行异步fs.readdir读取文件夹下面的所有文件,我们用 flat++记录 readdir数量， 每次readdir完成执行flat--。

变量二fileCount: 每一次文件(可能文件或者文件夹)的遍历，我们用fileCount++来记录，当文件创建完成或者文件夹创建完成，执行 fileCount-- 。

变量三dirCount: 每一次判断文件夹的操作，我们用 dirCount++来记录，当新的文件夹被创建完成，执行 dirCount--。

---

function completeControl(cb){
    /* 三变量均为0，异步I/O执行完毕。 */
    if(fileCount === 0 && dirCount ===0 && flat===0){
        color.green('------构建完成-------')
        if(cb && !isInstall ){
            isInstall = true
            color.blue('-----开始install-----')
            cb(()=>{
                color.blue('-----完成install-----')
                /* 判断是否存在webpack  */
                runProject()
            })
        }
    }
}

我们在每次创建文件或文件夹事件执行之后，都会调用completeControl方法，通过判断flat,fileCount,dirCount三个变量均为0，就能判断出整个复制流程,执行完毕,并作出下一步操作。

效果

创建项目阶段完毕

三 构建，集成项目阶段

第二阶段我们主要完成的功能有以下两个方面:

第一部分： 上述我们复制了整个项目，接下来需要下载依赖和运行项目；

第二部分： 我们只是完成了 mycli create 创建项目流程，对于 mycli start 运行项目 ，和 mycli build 打包编译项目，还没有弄。接下来我们慢慢道来。

1 解析命令，自动运行命令行。

之前我们介绍了，通过修改bin，借助commander模块来通过输入终端命令行，来执行node文件，来对应启动我们的程序。接下来我们要做的是通过nodejs代码，来执行对应的终端命令。这个功能的背景是，我们需要在复制整个项目目录之后，来自动下载依赖npm, install，启动项目npm start。

首先我们在mycli脚手架项目的src文件夹下，新建npm.js，用来处理下载依赖，启动项目操作。

①which模块助力找到npm

像unixwhich实用程序一样。在PATH环境变量中查找指定可执行文件的第一个实例。不缓存结果，因此hash -rPATH更改时不需要。也就是说我们可以找到npm实例，通过代码层面控制npm做某些事。

例子：

var which = require('which')
 
//异步用法
which('node', function (er, resolvedPath) {
  // 如果在PATH上找不到“节点”，则返回er
  // 如果找到，则返回exec的绝对路径
})
//同步用法
const resolved = which.sync('node')

在npm.js下

const which = require('which')
/* 找到npm */
function findNpm() {
  var npms = process.platform === 'win32' ? ['npm.cmd'] : ['npm']
  for (var i = 0; i < npms.length; i++) {
    try {
      which.sync(npms[i])
      console.log('use npm: ' + npms[i])
      return npms[i]
    } catch (e) {
    }
  }
  throw new Error('please install npm')
}

② child_process.spawn运行终端命令

在上面我们成功找到npm之后，需要用 child_process.spawn运行当前命令。

child_process.spawn(command[, args][, options])

command 要运行的命令。
args 字符串参数列表。
options