create react app在构建后无法读取环境变量

时间:2017-08-08 07:03:24

标签: node.js reactjs webpack create-react-app

我有一个使用create-react-app创建的反应应用程序,然后使用命令构建应用程序:npm run build

使用serve在构建后运行应用程序,如果我们通过运行ENV=production npm run start启动带有开发代码的应用程序,它可以读取process.env.ENV变量,因为我正在添加此插件webpack dev config

   new webpack.DefinePlugin({
      'process.env':{
        'ENV': JSON.stringify(process.env.ENV),
      }
    }),

我还将上面的脚本添加到webpack prod config中,但如果我在构建ENV=prod serve -s build后尝试此命令,则无法读取环境变量

如何解决这个问题?

4 个答案:

答案 0 :(得分:3)

您无法阅读ENV var的原因是:

(1)在开发模式下webpack监视您的文件,并即时捆绑您的应用程序。它还将读取(因为DefinePlugin)您的process.env.ENV并将其添加为全局变量。所以它基本上是从process.env到你的JS应用程序的管道变量。

(2)在您构建您的应用(使用webpack)之后,所有内容都已捆绑到一个或多个文件中。当您运行serve时,您只需启动一个提供静态构建文件的HTTP服务器。因此,无法将ENV传送给您的应用。

基本上DefinePlugin的作用是向捆绑包添加var。 E.g。

new webpack.DefinePlugin({
  'token': '12356234ga5q3aesd'
})

将添加与此类似的行:

var token = '12356234ga5q3aesd';

由于JS文件是 static ,因此之后无法更改此变量,您已使用webpack构建/捆绑它。基本上,当您执行npm run build时,您将创建已编译的二进制文件/ .dll / .jar / ...文件,并且无法再通过插件影响其内容。

答案 1 :(得分:3)

如果您在app.config.js中设置了所有环境变量,则可以在构建后的 中替换它们在main.????????.chunk.js文件中。

示例app.config.js看起来像:

export default {
  SOME_URL: "https://${ENV_VAR_1}"
  SOME_CONFIGURATION: "${ENV_VAR_2}",
}

app.config.js文件保持不变,将环境变量替换为其实际值。然后,创建优化的生产版本:

npm ci # if not already installed
npm run build

如果使用默认的Webpack配置,则app.config.js的内容将捆绑在build/static/js/main.????????.chunk.js中。环境变量的值可以是envsubst,使用如下bash脚本:

main_chunk=$(ls build/static/js/main.*.js)
envsubst <$main_chunk >./main_chunk_temp
cp ./main_chunk_temp $main_chunk
rm ./main_chunk_temp

注意:在上面的示例中,envsubst在运行时读取环境中设置的实际变量,并且 literally 用它们替换${ENV_VAR_1}${ENV_VAR_2}。因此,您只能运行一次,因为该块已被覆盖。

答案 2 :(得分:1)

您可以在项目的根目录中添加一个@Override protected List<CreateKeyspaceSpecification> getKeyspaceCreations() { CreateKeyspaceSpecification specification = CreateKeyspaceSpecification.createKeyspace(KEYSPACE); return Arrays.asList(specification); } 文件,并在其中定义环境变量。这将是您的默认(生产)环境变量定义。但是随后您可以使用一个名为.env的本地文件来覆盖默认值。

定义环境变量时,请确保它们以.env.local开头,以便您的环境变量定义如下所示:

REACT_APP_

此外,请将其添加到.gitignore中,以免提交本地替代:

REACT_APP_SERVER_URL=https://my-awesome-app.herokuapp.com

参考: Adding Development Environment Variables In .env (create-react-app)

答案 3 :(得分:0)

来自create-react-app documentation

  

您的项目可以使用环境中声明的变量,就像   它们是在您的JS文件中本地声明的。默认情况下,您将拥有   为您定义的NODE_ENV,以及所有其他环境变量   与REACT_APP _。

您可以在代码内的process.env中读取它们:

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}