如何将带有多普勒的env变量注入到带有webpack的react中

Question

我最近从使用.env文件切换到了一个秘密管理工具Doppler，并试图将Doppler中的变量注入到由webpack构建的React中。

然而，只需运行

doppler run -- webpack serve --config webpack.dev.js

不起作用。如果我想将多普勒的env注入到webpack中以构建我的React应用程序，我该怎么办？

Answer 1

我在webpack、中发现了EnvironmentPlugin

当您运行doppler run -- webpack serve --config webpack.dev.js时，doppler将env变量注入运行时，我们可以通过在数组中指定密钥名称将它们与EnvironmentPlugin一起传递，并将其传递到插件中

const { EnvironmentPlugin } = require("webpack");
module.exports = {
plugins: [
new EnvironmentPlugin(["SAMPLE_KEY"]),
],
};

另一种方法是通过一个物体，这种方法允许在多普勒未能提供关键的情况下使用默认值

const { EnvironmentPlugin } = require("webpack");
module.exports = {
plugins: [
new EnvironmentPlugin({"SAMPLE_KEY":"abcde"}),
],
};

只要数组或对象中指定的键与多普勒中指定的相匹配，这就应该有效。

此处引用webpack文档

Answer 2

我将从我的评论中回答我自己的问题。。。因为我终于想通了。

如果你在项目中使用.env文件，我有一个很大的文件，有50多行。

从基于Unix的IDE运行您可以装载.env文件：doppler run --mount .env npm run build

这在Windows VSCode上不起作用，所以如果你从基于Windows的IDE命令行运行构建(像我一样(，你必须下载.env文件

doppler secrets download --no-file --format env > .env

最佳做法是在处理后删除此未加密的文件！！

使用Docker在您想要运行的配置分支上进行CI构建：

doppler run --token ${TOKEN NAME} --mount .env npm run build