一、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
配置文件夹,用于自定义配置: