React 创建 js 与 ts 项目

一、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
  

• 创建 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 配置文件夹，用于自定义配置：