时间戳

首页 > 解决方案 > Rails Webpacker - 如何从视图 [HTML 文件] 访问 webpack 条目文件中定义的对象

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

问题描述

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

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

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

我的一个视图（HTML）文件中有以下脚本：

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

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

我收到以下错误：

未捕获的ReferenceError: Greeter未定义。

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

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

任何帮助将非常感激！

标签： ruby-on-railswebpackwebpacker

解决方案

要在不直接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]占位符是可选的，但如果您使用多个“包”，则允许您导出到单独的模块。

推荐阅读