Question

我有一个由Webpack和Gulp处理的项目。所有API都使用单个ROOT_URL变量并附加字符串以从后端获取信息。

对于多个部署，我有来自不同数据库的不同后端服务器。目前，对于每次更新，我都必须更改ROOT_URL并将项目捆绑在每个服务器中。

理想情况下，我想将一个包传递给每个已部署的服务器，以便每个服务器都引用一个包含各自ROOT_URL的本地JS文件。有没有办法做到这一点和/或是否有行业标准？

Answer 1

每当你有一些因服务器而异的东西时，你会使用环境变量。如果您需要在javascript spa中使用它，则必须将环境变量从服务器传递到javascript（如果使用节点，可能通过模板引擎，如ejs）。最终，如何做到这一点取决于您使用的后端技术。

Answer 2

使用Webpack，您可以指定配置文件位置。我使用它来分开dev和production配置。您可以使用它为每个处理ROOT_URL的环境提供单独的配置文件。

  "scripts": {
    "dev": "webpack --config ./src/config/dev.config.js",
    "prod": "webpack --config ./src/config/prod.config.js"
  },

Answer 3

您可以使用Webpack的DefinePlugin

定义环境变量

想象一下，您有一个部署脚本npm run deploy

在webpack.config.js添加DefinePlugin

module.exports = {
  entry: 'app.js',
  plugins: [
     new webpack.DefinePlugin({
       'process.env.API_ROOT': JSON.stringify(process.env.API_ROOT)
     })
  ]
}

然后在你的代码中：

api.js

var url = process.env.API_ROOT + '/resource'
fetch(url).then(function(){
  // do stuff
})

然后在部署时，您可以定义不同的API根

API_ROOT=https://api1.com npm run deploy（将使用API 1部署代码）

API_ROOT=https://api2.com npm run deploy（将使用API 2部署代码）

..等等。 Webpack将使用正确的URL自动替换代码中process.env.API_ROOT的所有匹配项。

可互换的API根网址

3 个答案: