create-react-app的使用

2017.11.14更新

关于自定义create-react-app，我们可以选择社区提供的解决方案react-app-rewired来满足我们的大部分自定义需求

将所有配置文件暴露出来

运行

npm run eject

注意，这个是不可逆操作，它会将所有配置文件，包括webpack, eslint, babel的配置文件全部暴露出来，以便你可以全权控制所有的配置细节，考虑到create-react-app自身的完整性，如果不是万不得已的情况，尽量不要执行这个操作

关于使用css preprocessor

因为react官方是推荐进行组件复用，而不是进行样式复用，所以在基于这个前提下，像less或者sass这样的预处理器，所能发挥的作用非常的有限。当然，如果你觉得你有必须这样做的理由，可以采用以下的办法

1.使用预处理器的命令行

如使用sass
第一步，安装

npm install --save node-sass-chokidar

第二步，添加处理命令

"scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom"

只要运行npm run watch-css命令，src目录下的所有.sass文件都会被编译成.css

2.修改webpack配置

运行npm run eject将所有create-react-app的配置文件暴露出来，然后修改webpack配置

添加自定义环境变量

环境变量可以让我们在不同的环境，如dev,production环境，进行不同的配置和操作，比如，很常见的需求就是在dev环境我需要请求测试环境的接口，而在production环境我需要请求线上接口。

使用环境变量

注意

凡是在create-react-app中自定义的环境变量，都需要加上REACT_APP_前缀

在HTML中使用环境变量

<title>%REACT_APP_WEBSITE_NAME%</title>

在JS中使用环境变量

const WEBNAME = process.env.REACT_APP_WEBSITE_NAME

内置的环境变量

create-react-app内置有两个环境变量，PUBLIC_URL和NODE_ENV

PUBLIC_URL是静态资源的发布路径，在public/index.html有使用，这个默认值是''，需要自己进行配置

NODE_ENV有三个值，分别对应如下:

• 运行npm start，为development
• 运行npm test，为test
• 运行npm run build，为production

NODE_ENV的值不能手动进行覆盖

定义环境变量

使用命令行

windows

set REACT_APP_SECRET_CODE=abcdef&&npm start

mac

REACT_APP_SECRET_CODE=abcdef npm start

使用.env文件

将.env文件放在项目根目录

REACT_APP_SECRET_CODE=abcdef

名字后面也能加后缀，不同后缀的文件对应不同的使用情况

• .env： 默认使用
• .env.local：用于本地变量覆盖，这个文件会在除了test环境的所有环境加载
• .env.development,.env.test,.env.production：在对应的环境加载
• .env.development.local,.env.test.local,.env.production.local：在对应的环境加载，最高优先级，会覆盖.env.*的配置

加载的优先级从高到低，依次为：

• npm start: .env.development.local, .env.development, .env.local, .env
• npm run build: .env.production.local, .env.production, .env.local, .env
• npm test: .env.test.local, .env.test, .env (note .env.local is missing)

多环境支持

因为create-react-app只支持development,production,test三个环境，当需要对更多环境提供支持的时候（比如，公司有两个测试环境，对应的接口都不一样），就需要修改下配置了。
其实很简单，只需要将create-react-app查找.env文件的一个变量(process.env.NODE_ENV)替换成自己的自定义的一个变量就行了

先运行npm run eject将所有配置项暴露出来
修改config/env.js下前面的几行代码中的其中一句

'use strict';

const fs = require('fs');
const path = require('path');
const paths = require('./paths');

// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];

//**************这句代码******************
// const NODE_ENV = process.env.NODE_ENV; 
const NODE_ENV = process.env.FS_ENV
//...

然后，在package.json中添加

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
+ "build-test1": "set FS_ENV=test1&&node scripts/build.js",
  "test": "node scripts/test.js --env=jsdom"
},

然后在根目录添加.env.test1，自定义的一个环境文件就能被加载了

上面是添加了一个test1环境，同理还能添加test2,test3······等等