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

Question

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

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

app/javascript/packs/custom_pack_with_functions.coffee：

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 不会使模块可用于全局范围。您可以通过以下几种方式做到这一点：

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()
     }
   });