带有 Webpacker 的 Rails 5.1.使用自定义 js 类

Question

我正在使用rails 5.1，并且在资产管道JS文件中使用webpacker的自定义类时遇到问题。

我的想法是，如果我有一些实用的js类，我想在任何地方使用，我会把它添加到包中，然后能够在webpacker端的任何内容以及管道端的所有内容中使用它。

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

如果我想在网络打包器方面使用它，我可以将其添加到

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

那里没有问题，但是后来我尝试在管道端使用该类，我得到了

Uncaught ReferenceError: Stuff is not defined

我是这样使用它的：

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

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

= javascript_pack_tag 'stuff'

我还尝试添加到管道应用程序中.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')

我确定我错过了一些小东西，只是看了太久才看到它。

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

原始帖子中有一点噪音，因为我试图让东西工作。 最后，您只需要接受的答案提供的提示。

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

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

在您的布局中，请确保具有：

= javascript_pack_tag 'application'

我不需要//= 在管道应用程序中需要东西.js。 我也不需要在 assets.rb 初始值设定项中添加公共目录。

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

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

或者，如果您想将其内联到index.slim中，或者您可以执行以下操作：

javascript: 
new Stuff();

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

./bin/webpack-dev-server

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

我的最终内容类如下所示：

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

Answer 1

您必须在window中声明导入的类，以便在前端代码(资产或模板)中使用它。 在您的包中application.js添加以下内容：

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

然后你可以使用它：

var foobar = new window.Stuff();

这里的完整堆栈示例：https://gist.github.com/Aschen/f0a53b0d522688cc46ef77705074c1d2