Create React App文档说明(二)

绝对路径导入

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

具体配置如下:

  1. 在工程下创建 jsconfig.json 文件(若是基于 TypeScript 开发,则是 tsconfig.json
  2. jsconfig.json 中添加基路径配置

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

使用全局变量

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

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

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

添加TypeScript

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

当创建一个基于 TypeScriptCreate React App 工程时

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

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

截止到 4/30/2019enumsnamespaces 还不支持使用

添加自定义环境变量

该特性在 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 来读取它。

  1. 当运行 npm run start 时,该变量的值为 development
  2. 当运行 npm run test 时,该变量的值为 test
  3. 当运行 npm run build 时,该变量的值为 production

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

使用场景:

配置环境变量

  1. shell 命令中配置
  2. .env 文件中配置

在HTML中使用环境变量

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

  • 除了一些内置变量(NODE_ENVPUBLIC_URL)之外,变量名必须以 REACT_APP_ 开头使用。
  • 环境变量在构建时注入

shell 命令中添加临时变量

Windows(cmd.exe)

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

Windows(Powershell.exe)

Linux, maxOS(Bash)

.env 文件中配置环境变量

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

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

在改变 .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)
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复