Rails:从 webpacker 提供的文件访问 JS 模块方法

2024-03-14

Context

我尝试使用 Webpacker gem 将应用程序中的资产移动到 webpack。应用程序很大,所以我需要部分完成。

到目前为止做了什么...

我成功地使用调用脚本javascript_pack_tag

我导出一个超级简单的模块:

# javascript/src/javascript/test.js'
const Direction = {
  log_to_console: function(){
    console.log('test');
  }
};
export default Direction;

然后在应用程序入口点导入

# javascript/packs/application.js
import Test from '../src/javascript/test.js'
Test.log_to_console();

最后在布局中渲染它:

# app/views/application.slim
= javascript_include_tag 'application'

结果是:“Test”字符串在浏览器控制台中可见。

问题

目前,在整个应用程序中,我们在视图中使用模块,如下所示:

# app/views/assets/javascripts/test.coffee
log_to_console = ->
  console.log('test');
@Test = { log_to_console }

# app/views/some/template.slim
javascript:
  Test.log_to_console()

但是将模块移动到 webpack 后我无法访问Test模块不再。

所以我的问题是:

如何配置webpackergem 或重构上面的代码以使log_to_console()视图/浏览器检查器中可用的方法吗?

理想情况下,我们还可以在由 sprocket 编译的旧 JavaScript 文件中访问它们。


我现在想出了这个解决方案。可能对遇到该问题的任何人都有帮助。

如果有人找到更好的解决方案,我很高兴在这里看到它;)。

现在,我们所有需要在视图/其他咖啡文件中可见的模块/库,我只是通过以下方式设置为全局可用window object.

import Foo from '../src/javascript/foo.js
window.Foo = Foo

我知道这是丑陋的反模式,但在我们更新脚本使其行为更像独立包之前,它可以作为临时解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Rails:从 webpacker 提供的文件访问 JS 模块方法 的相关文章

随机推荐