Angularjs 使用npm在构建时进行环境配置

有几篇博客文章解释了为什么从咕噜声或咕噜声切换到只使用普通npm的建筑是一个好主意，例如this one by或this one by。这些博客文章没有解释的一件事是我如何轻松地进行环境配置。例如，一个常见的需求是具有不同的RESTAPI位置。在开发过程中，服务器可能运行在

localhost:8080

上，但在生产过程中，应通过相对URL（如

/api

或

/rest/api

）访问服务器，并且开发和生产的端口或协议不同

有几种解决方案。例如，grunt支持像

和

这样的模板字符串，并且有grunt或gulp插件，就像这个问题中关于。这些解决方案特定于AngularJS（我正在使用），但我没有必要寻找AngularJS特定的解决方案

我也知道angular environment插件，但据我所知，它在运行时进行配置，我正在寻找一些可以在构建时进行配置的东西

因此，我所寻找的是一种允许我在构建时通过替换一些模板字符串或使用一些可以在运行时读取的变量生成Javascript文件来配置我的应用程序的东西

一个要求是它应该独立于操作系统。因此，我不想使用特定于UNIX的工具（如

sed

）来重写文件。由于变量扩展不同（例如，

%

与

$

），解决方案不应依赖于环境变量

是否有现有的解决方案或最佳实践

由于变量扩展不同（例如，%对$），解决方案应 不依赖环境变量

这切断了您的最佳解决方案。为什么不依赖环境变量呢？节点提供

process.env

访问环境变量。您可以创建使用process.env而不是您所指的“不同变量扩展”的自定义gulp/grunt任务

例如，您可以使用Jade模板在构建时将env var值传递给HTML。这将作为构建过程的一部分动态生成index.html，并基于env vars添加相关类

例如，根据env变量的值，可以在HTML标记上设置一个类

这可能反映了客户的需求

然后你可以有一些CSS

.customer1 .myimage {
  background-image: url("customer1.png");
}

.customer2 .myimage {
  background-image: url("customer2.png");
}

---

或者，您可以使用JavaScript来检测在构建过程中添加到head的类。

据我所知，环境变量依赖于平台，因此windows（批处理）上的

%

，Unix（bash）上的$。你有没有解决这个问题的建议？关于jade的建议看起来很有趣，如果我可以使用它，我会看一看。我相信手柄对服务器端也很好，你可以使用纯HTML格式，比如%和$，你是指阅读VAR吗？你不能只使用process.env.envvarname读取它们，其中envvarname是变量的名称吗？是否可以使用这些模板引擎创建javascript或json文件而不是html？jade和Handlebar用于服务器端html模板-这些技术可以用于客户端，但客户端，有更好的解决方案，比如angular（内置了手柄）-还有其他服务器端模板库用于其他文件类型-只需要嗅探一下！