React 创建 js 与 ts 项目

2023-04-05 337 阅读1分钟

一、`npx` 创建

创建 js 工程
```
$ npx create-react-app demo
```

创建 ts 工程

$ npx create-react-app demo --template typescript

二、`npm` 创建

全局安装 create-react-app

# 如果之前安装过，可先移除，保证最新版本
$ npm uninstall -g create-react-app

# 安装
$ npm install -g create-react-app

查看安装版本
```
$ create-react-app -V
```
创建 js 工程
```
$ create-react-app demo
```

创建 ts 工程

$ create-react-app demo --template typescript

三、`$ npm run eject` 释放配置文件

通过脚手架创建完项目后，会发现没有任何 配置文件（例如 webpack 相关配置文件）：

create-react-app 的背后，隐藏着一个 webpack。一般情况下来说，webpack 是默默隐藏的幕后英雄，不需要修改它的配置，只需要简单无脑使用即可。

create-react-app 本身的 webpack 配置文件存在于node_modules/react-scripts/ 目录下面，但是这个目录是 node_modules/，里面的源码都是不建议修改的。

某些情况下要修改 webpack 配置。那么如何才能完成修改 webpack 配置这个需求呢？

create-react-app 提供了一个命令，用于释放这些配置。命令是：
```
$ npm run eject
```
注意：eject 的翻译是：喷出，就是说把这些配置文件，从隐藏的位置给喷出来。而且 create-react-app 并不推荐大家这么做，因为这个步骤无法逆转。
这里经常遇到问题，产生报错，无法往下进行 npm run eject 报错，详解，所以执行之前，一定要做好备份工作，因为这个步骤不可逆转，也不是官方推荐执行的命令。

执行完毕后，项目根目录下面就有 config 和 scripts 两个目录生成。同时，package.json 里面的 scripts，也更新了新的命令。

上面命令内容变成了下面命令内容：

多出来的 config 和 scripts 配置文件夹，用于自定义配置：