ruby-on-rails - Rails Webpacker - 如何从 View [HTML 文件] 访问 webpack 条目文件中定义的对象

Question

我有一个 Rails 6 应用程序并使用 Webpacker 作为 Assets 。

我在文件 app/javascript/packs/application.js 中有以下代码:

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

我的一个 View (HTML)文件中有以下脚本:

<script>
 $(document).ready(function(){
   Greeter.hello();
 });
</script>

注意:我正在使用 JQuery，它工作正常。

我收到以下错误:

Uncaught ReferenceError: Greeter is not defined.

我们如何使用 libraryTarget和 library公开捆绑的模块，以便也可以从 HTML 文件访问它？

或者，还有其他方法可以使用 Rails Webpacker 吗？

任何帮助将非常感激!

Answer 1

要做到这一点而不直接改变 window应用程序代码中的对象，您需要导出 Greeter作为您的 application.js 的命名导出打包和扩展 Webpack 配置 output指定库名称和目标 var (或 window 也可以)。

// config/webpack/environment.js

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

// app/javascript/packs/application.js

export {
  Greeter
}

<script>
 $(document).ready(function(){
   Packs.application.Greeter.hello();
 });
</script>

library名称是任意的。使用 [name]占位符是可选的，但如果您使用多个“包”，则允许您导出到单独的模块。