使用npm编译时的环境配置

有几篇博客文章解释了为什么从简单的npm转换到grunt或gulp到建筑是一个好主意，例如Cory Hourse或这个由Keith Cirkle。这些博客文章没有解释的一件事是我如何轻松地进行环境配置。例如，一个常见的要求是拥有不同的REST API位置。在开发过程中，服务器可能在localhost:8080上运行，但在生产时应该通过相对URL访问，例如/api或/rest/api，并且端口或协议在开发和生产中有所不同。使用npm编译时的环境配置

有几种解决方案。例如grunt支持像<% %>和<%= %>这样的模板字符串，并且有像这个问题中的grunt或gulp插件关于grunt-ng-config。这些解决方案是特定于Angular（我正在使用），但我没有必要寻找一个AngularJS特定的解决方案。

我也知道angular-environment插件，但据我所见，这是在运行时配置，我正在寻找可以在构建时做到这一点的东西。

所以我要寻找的东西，让我要么通过更换一些模板串或产生一些变数，我可以在运行时读的JavaScript文件来配置我在构建时应用。

一个要求是它应该与操作系统无关。所以我不想使用UNIX的特定工具（如sed）来重写文件。由于变量扩展不同（例如%与$），解决方案不应依赖于环境变量。

有没有现有的解决方案或最佳做法呢？

来源

2016-04-15 lanoxx

由于不同的变量扩展（例如％和$）的解决方案应该不依赖于环境变量

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

process.env

访问env变量。你可以创建自定义的使用process.env的gulp/grunt任务，而不是你引用的“不同的变量扩展”。

可以使用，例如，玉模板在构建时通过的环境变量的值到你的HTML。这将生成您的index.html作为生成过程的一部分，并基于env vars添加相关的类。

例如，根据的环境变量的值，你可以在HTML标签设置一个类。

这可能反映了客户。

然后你可以有一些CSS

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

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

，或者你可以使用JavaScript来检测加在生成过程中头的类。

来源

2016-04-15 17:36:33 danday74

据我所知，环境变量是依赖于平台的，所以windows上的'％'（批处理）和Unix上的$（bash）。你有建议如何解决？玉的建议看起来很有趣，我会看看是否可以使用它。 – lanoxx

把手也适合服务器端我相信，你可以使用它纯HTML格式 – danday74

％和$的东西，你是指阅读变量？不能只使用process.env.envvarname来读取它们，其中envvarname是var的名称？ – danday74

使用npm编译时的环境配置

回答

相关问题