Rails 5.1 - 如何通过 webpack 将环境变量传递到前端答案

【问题标题】：Rails 5.1 - how to pass environment vars through webpack to frontendRails 5.1 - 如何通过 webpack 将环境变量传递到前端
【发布时间】：2017-12-20 22:07:10
【问题描述】：

我想在进行 api 调用的前端更改我的 api 的域。在开发中，我想要一个 localhost:xxxx 域和一个单独的用于登台和生产的域。现在，默认的 Rails webpack 开发服务器在 process 对象上公开了一个空的 .env 键。

我已经尝试在 bin/webpack-dev-server 中手动传递此配置，如下所示：

Dir.chdir(APP_PATH) do
  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
    "--config #{DEV_SERVER_CONFIG} NODE_ENV=development #{ARGV.join(" ")}"
end

我也尝试直接在config/shared.js 中添加.env 对象，如下所示：

new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(Object.assign(env, { 'NODE_ENV': process.ev)))),

这两种方法都不会修改.env 对象。

想法？

解决方案

放弃使用 webpack 作为传递环境变量的一种方式。使用良好的旧 Rails 环境在 window 对象上分配一个环境变量。

【问题讨论】：

标签： ruby-on-rails webpack webpack-dev-server

【解决方案1】：

我能够通过使用webpack environment plugin 来完成这项工作：

// config/webpack/development.js

const webpack = require('webpack')
const environment = require('./environment')
const config = environment.toWebpackConfig()

config.plugins = (config.plugins || []).concat([
  new webpack.EnvironmentPlugin([ 'SECRET_KEY' ])
])

module.exports = config

在您的应用程序中，您应该能够在 process.env 中访问SECRET_KEY：

console.log(process.env.SECRET_KEY)

希望有帮助！

【讨论】：