Create React App文档说明（二）

绝对路径导入

可以对工程做一些配置使其支持 绝对路径 导入，其结果跟在 webpack 中配置路径别名效果相同

具体配置如下：

2. 在工程下创建 jsconfig.json 文件（若是基于 TypeScript 开发，则是 tsconfig.json）

3. 在 jsconfig.json 中添加基路径配置

   {
     "compilerOptions": {
       "baseUrl": "src"
     },
     "include": ["src"]
   }
   

现在已经配置了绝对路径导入，可以像下面这样导入一个模块，该模块位于 src/components/Button.js

import Button from 'components/Button';

使用全局变量

当在 HTML 文件中包含一段 script 脚本，并对外暴露一些全局变量时，如果我们在组件中使用了这些变量，那么 eslint 会报出变量未定义的警告⚠️

这种情况可以从 window 对象下去获取这些变量来解决代码检查报错问题

另一种方案就是直接忽略掉这个错误 // eslint-disable-line

添加TypeScript

该特性在 react-scripts@2.1.0 及更高版本下可用

当创建一个基于 TypeScript 的 Create React App 工程时

npx create-react-app my-app --typescript

# or

yarn create react-app my-app --typescript

当往已有工程中添加 TypeScript 支持时

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest 

接下来将 js or jsx 文件后缀改为 ts or tsx （比如 src/index.js to src/index.tsx），然后重启服务

截止到 4/30/2019 ，enums 和 namespaces 还不支持使用

添加自定义环境变量

该特性在 react-scripts@0.2.3 及更高版本下可用

在项目中可以使用提前定义好的环境变量，就像它们是在本地 JS 文件中声明的一样。默认情况下，可以使用 NODE_ENV 这个变量，以及以 REACT_APP_ 开头的任何其他环境变量。

不要在 React App 下存储秘钥信息（比如私有API keys）

环境变量在构建期间嵌入进去

创建自定义变量必须以 REACT_APP_ 开头，为了防止意外暴露私有信息，除了 NODE_ENV 环境变量外，其他任何变量都将被忽略。

在服务运行期间，改变了任何环境变量的值都需要重启才能生效

我们所定义的这些环境变量都会挂载在 process.env 命名空间下。比如有一个名为 REACT_APP_NOT_SECRET_CODE 的环境变量，需要通过 process.env.REACT_APP_NOT_SECRET_CODE 这种方式在 JS 中使用

NODE_ENV_ 是一个特殊的内置环境变量，可以通过 process.env.NODE_ENV 来读取它。

2. 当运行 npm run start 时，该变量的值为 development

3. 当运行 npm run test 时，该变量的值为 test

4. 当运行 npm run build 时，该变量的值为 production

为了防止意外情况的发生，比如将开发环境下构建的代码部署到生产环境，因此不能手动覆盖 NODE_ENV 的值

使用场景：

2. render() {
     return (
       
         You are running this application in {process.env.NODE_ENV} mode.
         
            // 不同的环境读取不同的环境变量值
         
       
     );
   }
   

3. if (process.env.NODE_ENV !== 'production') {
     analytics.disable();
   }
   

配置环境变量

2. 在 shell 命令中配置

3. 在 .env 文件中配置

在HTML中使用环境变量

该特性在 react-scripts@0.9.0 及更高版本中可用

%REACT_APP_WEBSITE_NAME%

• 除了一些内置变量（NODE_ENV和PUBLIC_URL）之外，变量名必须以 REACT_APP_ 开头使用。
• 环境变量在构建时注入

在 shell 命令中添加临时变量

Windows（cmd.exe）

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

其中引号里面的内容不能包含空格

Windows（Powershell.exe）

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux, maxOS（Bash）

REACT_APP_NOT_SECRET_CODE=abcdef npm start

在 .env 文件中配置环境变量

该特性在 react-scripts@0.5.0 及更高版本中可用

在项目根目录下创建 .env 文件，定义一个不会改变值的环境变量如下：

REACT_APP_NOT_SECRET_CODE=abcdef

在改变 .env 文件后，需要重启服务

.env 文件应当包含进源码管理工具中（.env*.local* 也是如此）

.env还可以使用哪些其他文件？

该特性在 react-scripts@1.0.0 及更高版本中可用

• .env: 默认文件
• .env.local: 所有环境下都会加载除了 test
• .env.development, .env.test, .env.production: 根据当前环境选择性加载
• .env.development.local, .env.test.local, .env.production.local: 本地环境配置覆盖特定的环境配置

优先级顺序：左边的优先级大于右边的

• 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)