如何在 webpacker 中使 JS 函数全局化 Rails 6

Question

我尝试像在 Rails 中那样组织我的前端 5. 我有一些带有函数的 js 文件，并在代码的不同位置使用了这些函数以满足我的需要。但是在 Rails 6 中使用 js 是完全不同的。无论如何，我想我已经了解了 packs 和 webpacker 的主要思想。但是如何使用自定义的js函数呢？将其写入一个文件并在另一个文件中使用？应该有办法的。

比如我有一些自定义的js包：

app/javascript/packs/custom_pack_with_functions.咖啡:

console.log 'hey'

@hi = () ->
  console.log 'HI'

而且我希望 hi 功能在我看来可用。

some_view.html.slim:

= javascript_pack_tag 'custom_pack_with_functions'

javascript:
  hi()

但是当我进入相应页面时，我在控制台中只看到以下消息：

hey
ReferenceError: hi is not defined

如何定义 hi 函数以便在任何地方使用它？

Answer 1

默认情况下，Webpack 不会使模块在全局范围内可用。您可以通过以下几种方式进行操作：

将函数分配给全局 window 对象，即 window.hi = function() { ... }。我在很多地方都不喜欢这样的副作用，所以这是我最不喜欢的选择，但也许是最容易理解的。
您可以考虑使用 expose-loader。这意味着将您的 webpack 配置自定义为 "expose" 从选定模块到全局范围的选定功能。它在少数情况下可以很好地工作，但对于许多用例来说会变得乏味。

从您的入口点导出选定的函数并配置 webpack 以打包 your bundle as a library. This is my favorite approach if you prefer to call global functions from the view. I've written about this approach specifically for Webpacker on my blog。

// app/javascript/packs/application.js

export * from '../myGlobalFunctions'


// config/webpack/environment.js

environment.config.merge({
  output: {
    // Makes exports from entry packs available to global scope, e.g.
    // Packs.application.myFunction
    library: ['Packs', '[name]'],
    libraryTarget: 'var'
  },
})

:javascript
  Packs.application.hi()

完全不要使用全局函数；使用不同的机制从您的 webpack JS 中触发函数，例如从给定页面的事件侦听器中或在给定元素存在的情况下。

// app/javascript/initializer.js

import hi from '../hi';

document.addEventListener('DOMContentLoaded', () => {
  if ( /* some logic for my page is true */ ) {
    hi()
  }
});

如何在 webpacker 中使 JS 函数全局化 Rails 6

How to make JS function global in webpacker Rails 6

javascript

ruby-on-rails-6

webpacker