Rails 6 在 rails 视图中使用 Webpacker javascript 函数答案

【问题标题】：Rails 6 use Webpacker javascript functions in rails viewRails 6 在 rails 视图中使用 Webpacker javascript 函数
【发布时间】：2021-03-13 02:51:22
【问题描述】：

我想重用我在几个不同视图中编写的 javascript 函数。我该如何在 Rails 6 中执行此操作？到目前为止，我能够使用的唯一解决方案是将 javascript 文件中的函数定义为 window.functionName = function() {}

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

【问题讨论】：

“在视图中使用”是什么意思？视图中有 javascript_tag 吗？

标签： javascript ruby-on-rails webpacker

【解决方案1】：

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

首先，导出您想从视图中访问的任何引用。这些引用必须从入口点导出到您的 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 配置中，您将添加此 sn-p 以表明您希望将 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 的入口点，您可以在视图中将您的函数作为Packs.application 的属性访问。

例子：

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

【讨论】：

感谢@rossta，很好的回答。这应该被接受为正确答案