Rails 5/6：如何在webpacker中包含JS函数？

Question

我正在尝试将Rails 3应用程序更新到Rails 6，因为我的Javascript函数无法访问，所以我现在默认的webpacker出现问题。

我得到：ReferenceError: Can't find variable: functionName用于所有js函数触发器。

我做的是：

• 在/ app / javascript中创建app_directory
• 将我的开发javascript文件复制到app_directory并将其重命名为index.js
• 将console.log('Hello World from Webpacker');添加到index.js
• 将import "app_directory";添加到/app/javascript/packs/application.js
• 添加到/config/initializers/content_security_policy.rb：

  Rails.application.config.content_security_policy do |policy|
    policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
  end

我从Webpacker的'Hello World'登录到控制台，但是当试图通过浏览器中的<div id="x" onclick="functionX()"></div>访问一个简单的JS函数时，我得到了引用错误。

我知道资产管道已被webpacker取代，这对于包含模块应该很棒，但是我应该如何包含简单的JS函数？我错过了什么？

提前致谢？

Answer 1

从官方rails应用指南：

在哪里坚持你的JavaScript

无论您是使用Rails资产管道还是直接向视图添加标记，您都必须选择放置任何本地JavaScript文件的位置。

我们为本地JavaScript文件选择了三个位置：

app / assets / javascripts文件夹，lib / assets / javascripts文件夹和vendor / assets / javascripts文件夹

以下是为脚本选择位置的准则：

使用app / assets / javascripts为您的应用程序创建JavaScript。

将lib / assets / javascripts用于许多应用程序共享的脚本（但如果可以，请使用gem）。

使用vendor / assets / javascripts来获取其他开发人员的jQuery插件等的副本。在最简单的情况下，当所有JavaScript文件都在app / assets / javascripts文件夹中时，您无需做任何其他事情。

在其他任何地方添加JavaScript文件，您将需要了解如何修改清单文件。

更多阅读：http://railsapps.github.io/rails-javascript-include-external.html

Answer 2

看看webpacker如何“打包”js文件和函数：

/***/ "./app/javascript/dashboard/project.js":
/*! no static exports found */
/***/ (function(module, exports) {

  function myFunction() {...}

因此webpacker将这些函数存储在另一个函数中，使它们无法访问。不知道为什么会这样，或者如何正确地解决它。

但是有一个解决方法。您可以：

1）更改功能签名：

function myFunction() { ... }

至：

window.myFunction = function() { ... }

2）保持函数签名不变，但你仍然需要添加对它们的引用，如图所示here：window.myFunction = myFunction

这将使您的函数可以从“窗口”对象全局访问。

Answer 3

有关从旧资产管道迁移到新webpacker工作方式的说明，您可以在此处看到：

https://www.calleerlandsson.com/replacing-sprockets-with-webpacker-for-javascript-in-rails-5-2/

这是在Rails 5.2中从资产管道转移到webpacker的一个方法，它让你了解Rails 6中的内容是如何不同的，因为webpacker是javascript的默认设置。特别是：

现在是时候将所有应用程序JavaScript代码从app / assets / javascripts /移动到app / javascript /。

要将它们包含在JavaScript包中，请确保在app / javascript / pack / application.js中要求它们：

require('your_js_file')

所以，在app/javascript/hello.js中创建一个文件，如下所示：

console.log("Hello from hello.js");

然后，在app/javascript/packs/application.js中，添加以下行：

require("hello")

（请注意，不需要扩展名）

现在，您可以在打开浏览器控制台的情况下加载页面并查看“Hello！”控制台中的消息。只需在app/javascript目录中添加您需要的任何内容，或者更好地创建子目录以保持代码的有序性。