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

如何解决Rails 6 在 rails 视图中使用 Webpacker javascript 函数

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

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

解决方法

向窗口添加属性会污染全局命名空间（与创建大量全局变量相同。

有几种方法可以实现您的愿望。

最简单的方法是添加到窗口。有时这已经足够了，只是不夸张。
创建一个 Utils 模块来保存所有这些方法并导出到窗口。然后您可以将其称为 Utils.function_name()。比 #1 更好的选择。
根据场景，您可以在 dom 就绪时绑定一个事件（单击、悬停等），该事件调用您想要的方法。例如：在点击时绑定一个按钮来调用 function_name()。

#3 可能是最好的，因为您的视图中没有任何 javascript_tag。视图应该只是关于 html。 CSS & JS 应该留在他们的文件中。使用 webpacker，您可以 Lazy Load 并在 js 文件异步导入后执行您的方法和许多其他事情。你只需要重新组织一下你的逻辑。

#1 和 #2 用于旧的 Asset Pipeline 方式。

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

首先，导出您想从您的视图中访问的任何引用。这些引用必须从入口点导出到您的 Webpacker 代码，通常是 cmake_minimum_required(VERSION 3.0.0) project(t1 VERSION 0.1.0) enable_testing() find_package(GTest REQUIRED) add_library(func STATIC func.cpp) add_library(test_main STATIC main.cpp) target_link_libraries(test_main PRIVATE gtest) add_executable(mTest mTest.cpp) set(CPACK_PROJECT_NAME ${PROJECT_NAME}) set(CPACK_PROJECT_VERSION ${PROJECT_VERSION}) include(CPack) find_package(Threads REQUIRED) target_link_libraries(mTest PRIVATE func test_main gtest Threads::Threads) gtest_discover_tests(t1) 文件，即 application.js (Webpacker 5) 或 app/javascript/packs/application.js (Webpacker 6)。

app/packs/entrypoints/application.js

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

Webpacker 5

// app/javascript/packs/application.js

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

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

Webpacker 6

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

通过上面的配置，webpack 会导出一个名为 Packs 的模块到全局作用域。 Packs 变量将具有对应于 // 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',libraryTarget: 'window' },}) 的每个条目的属性。对于名为 [name] 的入口点，您将在视图中将您的函数作为 application.js 的属性进行访问。

示例：

Packs.application