Question

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

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

我所做的是：

在/ app / javascript
将我的开发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

查看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 2

摘自Rails官方指南：

将JavaScript粘贴在哪里

是否使用Rails资产   管道或直接向视图添加标签，您必须   选择将本地JavaScript文件放在何处。

对于本地JavaScript文件，我们可以选择三个位置：

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

以下是选择指南   您的脚本的位置：

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

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

使用供应商/资产/ javascripts复制jQuery插件等，从   其他开发人员。在最简单的情况下，当您所有的JavaScript文件   位于app / assets / javascripts文件夹中，仅此而已   需要做。

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

更多阅读： this

Answer 3

将代码替换为自定义Java脚本文件中的代码来自

function function_name() {// body //}

至

window.function_name = function() {// body //}

Answer 4

有关从旧资产管道转换为新的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")

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

现在，您可以在浏览器控制台打开的情况下加载页面，并看到“您好！”控制台中的消息。只需在app/javascript目录中添加所需的内容，或者创建子目录以使代码井井有条。

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

4 个答案: