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

一 前言

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

①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 
1

mac

sodu npm install rux-cli -g 
1

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

rux create 
1

2 设置目标

设置目标，分解目标

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

二 创建文件阶段

1 终端命令行交互

① node 修改 bin

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

例子：

mycli create 
1

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

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

建立工程

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

mycli.js文件

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

然后在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": "
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/138930