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

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

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

应用程序/javascript/packs/custom_pack_with_functions.coffee:

console.log 'hey'

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

我希望hi在我看来，该功能将可用。

一些_view.html.slim:

= javascript_pack_tag 'custom_pack_with_functions'

javascript:
  hi()

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

hey
ReferenceError: hi is not defined

​ 如何定义hi可以从任何地方使用它的功能吗？

默认情况下，Webpack 不会使模块在全局范围内可用。您可以通过以下几种方法来做到这一点：

1. 将函数分配给全局window对象，即window.hi = function() { ... }。我不喜欢在很多地方出现这样的副作用，所以这是我最不喜欢的选择，但也许是最容易理解的。

2. 你可以看看使用expose-loader。这意味着自定义您的 webpack 配置以将选定模块中的选定函数“公开”到全局范围。它对于少数情况可以很好地工作，但对于许多用例来说会变得乏味。

3. 从入口点导出选定的函数并配置 webpack 进行打包你的包作为一个库。如果您喜欢从视图调用全局函数，这是我最喜欢的方法。我在我的博客上专门为 Webpacker 写过这种方法.

   // 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()
   

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

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