REACT_APP_* 与 NODE_PATH 环境变量
REACT_APP_* vs NODE_PATH Environment Variables
常规 CRA 环境变量(必须以 REACT_APP_ 开头)和 NODE_PATH 变量(用于避免必须使用相对路径进行导入,.. /../../foo 等)
根据我的测试,除非以 REACT_APP 开头,否则不能使用任何变量,那么 NODE_PATH 变量如何不像其他不以 REACT_APP 开头的变量那样被忽略?
NODE_PATH
是可以访问的,因为它是在 react-scripts
.
的 Webpack 配置中添加的
您可以在此处查看添加它的代码:
https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-scripts/config/env.js#L61
您会在该文件中看到您还可以设置 NODE_ENV
,它设置您 运行 所在的环境(例如 development
、staging
等。 ) 以及 PUBLIC_URL
回答您关于差异的问题:
NODE_PATH
允许您使用绝对路径进行导入。例如,您可以将 NODE_PATH
设置为以下内容:NODE_PATH=src:src/components:src/containers
然后在您的 React 代码中您可以这样写: import Button from 'button'
而不是 import Button from '../../../button'
只要您将该模块放在文件夹 src
、src/components
或 src/containers
之一中,因为 create-react 应用程序将在这些文件夹中查找 button
模块。您实际上不会像使用 REACT_APP_*
变量那样在 React 代码中使用 NODE_PATH
变量。基本上,它会告诉您的应用到哪里寻找模块。
REACT_APP_*
变量在构建时使用我链接到的文件中的 Webpack 配置注入到您的应用程序中。
这个:const GRAPHQL_URI = REACT_APP_GRAPHQL_URI
变成这样:const GRAPHQL_URI = https://example.com
如果您的 .env
文件中有此内容:REACT_APP_GRAPHQL_URI = https://example.com
常规 CRA 环境变量(必须以 REACT_APP_ 开头)和 NODE_PATH 变量(用于避免必须使用相对路径进行导入,.. /../../foo 等)
根据我的测试,除非以 REACT_APP 开头,否则不能使用任何变量,那么 NODE_PATH 变量如何不像其他不以 REACT_APP 开头的变量那样被忽略?
NODE_PATH
是可以访问的,因为它是在 react-scripts
.
您可以在此处查看添加它的代码: https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-scripts/config/env.js#L61
您会在该文件中看到您还可以设置 NODE_ENV
,它设置您 运行 所在的环境(例如 development
、staging
等。 ) 以及 PUBLIC_URL
回答您关于差异的问题:
NODE_PATH
允许您使用绝对路径进行导入。例如,您可以将 NODE_PATH
设置为以下内容:NODE_PATH=src:src/components:src/containers
然后在您的 React 代码中您可以这样写: import Button from 'button'
而不是 import Button from '../../../button'
只要您将该模块放在文件夹 src
、src/components
或 src/containers
之一中,因为 create-react 应用程序将在这些文件夹中查找 button
模块。您实际上不会像使用 REACT_APP_*
变量那样在 React 代码中使用 NODE_PATH
变量。基本上,它会告诉您的应用到哪里寻找模块。
REACT_APP_*
变量在构建时使用我链接到的文件中的 Webpack 配置注入到您的应用程序中。
这个:const GRAPHQL_URI = REACT_APP_GRAPHQL_URI
变成这样:const GRAPHQL_URI = https://example.com
如果您的 .env
文件中有此内容:REACT_APP_GRAPHQL_URI = https://example.com