Rails 5.1 - 如何通過webpack將環境變量傳遞到前端

Question

我想在api調用的前端更改我的api域。在開發過程中，我想要一個localhost：xxxx域，另一個用於分段和生產。現在，默認的Rails webpack dev服務器在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對象上分配環境變量。

Answer 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 

在您的應用程序，你應該能夠訪問SECRET_KEY內process.env：

console.log(process.env.SECRET_KEY) 

希望幫助！