将Rails环境暴露给Webpacker

Question

我正在使用Rails v5和Webpacker v2。到目前为止，一切都很顺利，但我遇到了一个问题：如何将Rails助手暴露给我的TypeScript。

我知道Webpacker附带rails-erb-loader，因此我期望我可以将.erb添加到TypeScript文件中，然后在其他地方导入该文件：

// app/javascript/utils/rails.ts.erb
export const env = "<%= Rails.env %>"

export function isEnv(envName: string) {
  return env == envName
}

// app/javascript/packs/application.ts
import { env } from "../utils/rails"

但是，即使我修改了TypeScript加载器以包含ERB文件，Webpack仍然找不到“rails”文件：

module.exports = {
  test: /.ts(\.erb)?$/,
  loader: 'ts-loader'
}

我看到的只有：

error TS2307: Cannot find module '../utils/rails'.

如何将Rails的帮助程序和变量暴露给我的JavaScript？

- fny

Answer 1

Rails env 来自于环境变量。这意味着你可以通过设置变量来进行配置（例如在 bash 中）：

export RAILS_ENV=production

因此，您完全不需要处理Rails。

// app/javascript/utils/rails.ts.erb
export const env = process.env.RAILS_ENV || "development"

export function isEnv(envName: string) {
  return env == envName
}

这有一个很大的优势：你不必加载整个Rails应用程序来编译JavaScript。如果你的应用程序越来越大，Rails在首次加载时可能会变得非常缓慢。

由于你无法在前端（浏览器）访问process.env，因此你还需要一种方法来使其存在。在webpack中，可以通过DefinePlugin实现：

更新你的webpack配置以使用该插件（在plugins部分）：new webpack.DefinePlugin({ "process.env": { RAILS_ENV: process.env.RAILS_ENV } })，然后你将在客户端获得一个可用的process.env.RAILS_ENV。

- Francesco Belladonna

---

你的想法是对的...但是Web客户端无法访问process.env (VM265:1 Uncaught ReferenceError: process is not defined)。也许有一些预处理的方法？ - fny

你提到了webpacker，所以我认为你在谈论nodejs。如果是这样的话，请更新你的webpack配置，使用插件DefinePlugin(https://gist.github.com/haf/f671f1113d2c5dead5a7#file-gistfile1-txt-L109-L113)，像这样`new webpack.DefinePlugin({"process.env": {RAILS_ENV: process.env.RAILS_ENV}})，然后你就可以在客户端中使用process.env.RAILS_ENV`了。 - Francesco Belladonna

太好了！您能为后人的缘故更新您的答案吗？ - fny

是的！完成了，希望会有所帮助。 - Francesco Belladonna

Answer 2

Rails Env可以通过以下方式访问：

process.env.RAILS_ENV

- Jeremy Lynch

---

你会在 config/webpack 目录中看到每个环境都设置了正确的 process.env.NODE_ENV，你也可以使用它。 - Brendon Muir