2

我正在使用 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 ---")
  }
}
4

1 回答 1

2

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

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

然后你可以使用它：

var foobar = new window.Stuff();

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

于 2017-06-21T13:14:26.073 回答