Rails 5.1 与 Webpacker。使用自定义 js 类

Question

我正在玩 rails 5.1，但在资产管道 js 文件中使用来自 webpacker 的自定义 class 时遇到问题。

我的想法是，如果我有一些我想在任何地方使用的实用程序 js class，我会将它添加到包中，然后能够在 webpacker 端的任何东西以及所有东西中使用它在管道一侧。

// app/javascript/packs/stuff.js
class Stuff {
  constructor() {
    console.log("*** building stuff! **")
  }
}
export default Stuff

如果我想在 webpacker 端使用它，我只需将它添加到

packs/application.js
import Stuff from "./stuff"
let s = new Stuff()

没有问题，但后来我尝试在管道端使用 class，我得到

Uncaught ReferenceError: Stuff is not defined

我是这样使用的：

// assets/javascripts/users.js
new Stuff();

我已经添加到我的布局文件中：

= javascript_pack_tag 'stuff'

而且我还尝试添加到管道 application.js

//= require stuff
//= require_tree .

stuff.js 已正确编译为 public/packs/stuff.js 并且位于 manifest.json

{
  "application.js": "http://0.0.0.0:8080/packs/application.js",
  "hello_react.js": "http://0.0.0.0:8080/packs/hello_react.js",
  "stuff.js": "http://0.0.0.0:8080/packs/stuff.js" 
}

我也将它添加到 assests.rb 初始值设定项中：

Rails.application.config.assets.paths << Rails.root.join('public/packs')

我敢肯定我遗漏了一些小东西，而且我已经看了太久才看到它。

----- 更新 -----

原来的 post 中有一点噪音，因为我正在努力让东西工作。最后你只需要接受的答案提供的提示。

在app/javascript/packs/application.js 中添加：

import Stuff from "./stuff"
window.Stuff = Stuff

并且在您的布局中确保具有：

= javascript_pack_tag 'application'

我不需要 //= 需要管道中的东西 application.js。我也不需要在 assets.rb 初始化程序中添加 public 目录。

要在像 users.js 这样的管道 js 文件中使用，只需确保在像这样加载所有内容后使用它：

$( document ).on('turbolinks:load', function() {
  new Stuff();
})

或者如果你想在你的 index.slim 中内联它或者你可以做的事情：

javascript: 
   new Stuff();

设置正确后，您需要重启 webpack 服务器：

./bin/webpack-dev-server

现在，如果您对 stuff.js 进行更改，它们应该会像您期望的那样立即编译并可用。

我最后的东西 class 看起来像这样：

export default class Stuff {
  constructor() {
    console.log("*** building stuff! **")
  }

  more() {
    console.log("--- more stuff ---")
  }
}

Answer 1

您必须在 window 中声明导入的 class 才能在前端代码（资产或模板）中使用它。在您的包中 application.js 添加以下内容：

import Stuff from "./stuff"
window.Stuff = Stuff

然后你就可以使用它了：

var foobar = new window.Stuff();

此处为完整堆栈示例：https://gist.github.com/Aschen/f0a53b0d522688cc46ef77705074c1d2

Rails 5.1 与 Webpacker。使用自定义 js 类

Rails 5.1 with Webpacker. Using custom js classes

javascript

ruby-on-rails

webpack

ruby-on-rails-5.1

webpacker