从零开始搭建react，ts脚手架应该怎么操作？

从零开始搭建react，ts脚手架应该怎么操作？

在软件开发的过程中少不了前端研发，前端研发中的“脚手架”是一个类比，意思是说有人帮你把前端研发的环境以及工具都配置好了，你可以直接开启研发工作了，所谓的开发环境就是我们常听到的“脚手架”。比如vue.js就有个vue-cli脚手架，那么对于node.js的开发环境，我们帮你把开发环境所需的西都配置好了，接下来你不用再考虑搭建这些工具环境，把脚手架下载下来就可以直接就可以了。

我们在这里文章内容里边用的是mycli，可是我并沒有提交新项目到npm，可是本文的技术性是小编以前的一个钢管脚手架原形，很感兴趣的同学们高速下载能够感受实际效果。

1、全局性免费下载钢管脚手架rux-cli

windows

npminstallrux-cli-g

苹果电脑

sodunpminstallrux-cli-g

1条指令建立新项目，安裝依靠，编译程序新项目，运作新项目。

ruxcreate

2、设定总体目标

设定总体目标，溶解总体目标。

大家期待用1条cmd，完成新项目建立，依靠免费下载，新项目运作，依靠搜集等诸多步骤。

假如一下子设计方案全部作用，很有可能会觉得脑壳空白一片，因此我们要学好溶解总体目标。具体纵观全部步骤，关键分成创建文件环节，搭建，集成化网站build环节，运作项目阶段。

整理每一个环节大家必须做的事儿。

创建文件环节

1、终端设备cmd互动

①node改动bin

大家期待像vue-cli那般，根据自定的cmdvuecreate，逐渐建立一个新项目，最先可以让程序流程终端设备鉴别大家的自定命令，大家最先必须改动bin。

事例：

myclicreate

大家期待的终端设备可以鉴别mycli，随后根据myclicreate建立一个新项目。事实上步骤大概是那样的根据mycli能够导向性实行特定的node文档。下面我们一起剖析一下操作步骤。

实行终端设备指令号，期待結果是实行当今的node文档。

我们在终端设备运行命令行的情况下，统一走bin文件夹名称下边的 mycli。js文件。

mycli。js文件

#!/usr/bin/envnode

'usestrict';

console。log('hello，world')

随后在buildage。json中申明一下bin。

{

"name":"my-cli"，

"version":"0.0.1"，

"description":""，

"main":"index。js"，

"bin":{

"mycli":"。/bin/mycli。js"

}，

"scripts":{

"test":"echo"Error:notestspecified"&&exit1"

}，

"author":""，

"license":"ISC"，

"dependencies":{

"chalk":"^4.0.0"，

"inquirer":"^7.1.0"，

"which":"^2.0.2"

}}

万事具备，为了更好地在当地调节，my-cli文件夹名称下要npmlink，假如在苹果电脑上必须实行sudonpmlink。

随后大家随意新创建一个文件夹名称，实行一下 mycli。见到取得成功打印出hello，world，第一步算作成功了。

下面大家做的是让node文档(demo新项目中的mycli。js)可以了解大家的终端设备指令。