前端与 Express 和 HTML 的 Javascript 产品和开发差异化答案

【问题标题】：Javascript prod and dev differentiation in the frontend with Express and HTML前端与 Express 和 HTML 的 Javascript 产品和开发差异化
【发布时间】：2020-12-21 02:14:26
【问题描述】：

对于我的 Web 应用程序，我在后端使用 Express、Node.js，在前端提供一些 HTML 文件。我没有使用任何前端框架。

在后端，我指定前端文件的位置：

app.use('/public', express.static(path.resolve(__dirname, "../public")));

在public 文件夹中，我放置了所有前端HTML 文件。我也有一些 Express 路由器来为用户提供正确的文件：

router.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../public/html/main/example.html"));
});

在example.html 文件中，它需要一个JS 文件<script src="/resource/js/script1" async></script> 在script1 中，我使用的是公钥pk_test_wefwefeweffwe。该密钥仅用于开发。对于生产，我需要一个新密钥pk_live_woefiweoifnweoif。现在，每当我们实时部署。我必须手动更改该密钥。我想知道是否有一种自动的方法。

在 node.js 后端，我可以用process.env.NODE_ENV 检测我们是在生产还是开发。但这在 script1 这样的前端 JS 文件中是无法检测到的。我想过根据后端环境是 prod 还是 dev 来提供不同的 HTML 文件，但这似乎有点乏味，因为我每次进行更改时都必须更新 HTML/JS 文件。

是否有一种方便的方法来制作/提供不同的前端文件（或根据环境是 prod 还是 dev 修改前端文件的一部分），具体取决于环境是 prod 还是 dev？

【问题讨论】：

我觉得最简单的方法是让script1 能够分辨它所处的环境。我知道你提到这是不可能的，但我觉得必须有某种方法（即使只是看一下 URL）。如果这真的不可能，您的应用程序部署是什么样的？如果您有任何类型的自动化，它可以在部署期间注入正确的变量。

标签： javascript node.js express

【解决方案1】：

你有两个选择：

编译时间

如果您正在为您的 UI 运行构建，您可以在编译时替换环境变量（Webpack 和 Rollup 以及所有其他人都应该具备这种能力）。

优点：没有特殊的系统来读取环境变量。可以为不同的环境做编译时间差异（例如，源映射或开发构建，对开发环境有更多的调试）。无需服务器即可动态插入正确的环境变量。

缺点：可能会使部署管道显着复杂化，特别是需要为每个环境创建 Docker 映像而不是通过单个环境进行推广。

运行时间

您可以通过在<head> 中操作提供的 HTML 来传递您的环境变量：

<script>
  window.__ENV = { someEnvVars: 'nice' }
</script>

或者通过在前端文件中添加您的 HTML <head>：

<script src="envvars.js"></script>

然后检测该文件是否在 NodeJS 服务器上被请求并动态返回 window.__ENV = { someEnvVars: 'nice' } 作为内容。

优点：在专业的 Docker 类型情况下简单的部署管道。无需特殊的前端构建工具来替换变量。

缺点：需要服务器来动态插入环境变量（您的应用的可移植性较差，不能简单地在任何可以提供静态文件的服务器上运行）。必须为所有 env 构建一个值得生产的构建 (NODE_ENV = 'production')（例如，在 React 中减少调试输出）。

【讨论】：