Question

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

我的想法是，如果我有一些我希望在任何地方使用的实用程序js类，我将它添加到包中，然后能够在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()

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

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')

我确定我错过了一些小东西，并且只是看了很长时间才能看到它。

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

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

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

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

在你的布局中一定要有：

= javascript_pack_tag 'application'

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

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

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

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

javascript: 
   new Stuff();

一旦设置正确，您将要重新启动webpack服务器：

./bin/webpack-dev-server

现在，如果你对stuff.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

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

1 个答案: