javascript - Rails 6 在 Rails View 中使用 Webpacker javascript 函数

Question

我想重用我在几个不同 View 中编写的 JavaScript 函数。我怎样才能在 Rails 6 中做到这一点？到目前为止，我能够使用的唯一解决方案是在 javascript 文件中将函数定义为 window.functionName = function() {}

然而，许多其他关于此的帖子都表示这是一个糟糕的解决方案，应该避免。定义可以在 Rails View 中使用的函数的正确方法是什么？

Answer 1

如果您使用 Webpacker，我建议将您的 JavaScript 应用程序导出为库。

首先，导出您想要从 View 中访问的任何引用。这些引用必须从 Webpacker 代码的入口点导出，通常是 application.js 文件，即 app/javascript/packs/application.js (Webpacker 5) 或 app/packs/entrypoints/application.js(Webpacker 6)。

// app/javascript/packs/application.js

import { functionName } from '../src/functionName'

export functionName // <== we want this function to be available in the view

在您的 Webpacker 配置中，您可以添加此代码片段以表明您希望将 JavaScript 代码视为库。

Webpacker 5

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

environment.config.merge({
  output: {
    // Choose whatever you want for `library`, [name] is a placeholder
    library: ['Packs', '[name]'],

    // Attach the library to the global scope in the browser
    libraryTarget: 'window'
  },
})

module.exports

Webpacker 6

// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')

module.exports = merge(webpackConfig, {
  output: {
    // Makes exports from entry packs available to global scope, e.g.
    library: ['Packs', '[name]'],
    libraryTarget: 'window'
  },
})

通过上述配置，webpack 会将一个名为 Packs 的模块导出到全局范围。 Packs 变量将具有与 [name] 的每个条目相对应的属性。对于名为 application.js 的入口点，您可以在 View 中将函数作为 Packs.application 的属性进行访问。

示例:

<%= javascript_pack_tag 'application' %>
<script>
Packs.application.functionName()
</script>