javascript - 如何在 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 以打包 your bundle as a library .如果您更喜欢从 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()
   

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

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