Javascript 在 Ruby 中编译 Rails 6

Question

我正在使用 RoR 6.1.0，并想添加一个 Javascript 库。作为测试用例，我将尝试添加 JQuery。我正在使用 webpacker 来管理我的应用程序中的 Javascript 库。

首先我使用yarn将jquery添加到项目中：

yarn add jquery

接下来，我在 webpacker 应用程序入口点 app/javascript/packs/application.js 中导入 jquery。第二行验证导入：

import jQuery from "jquery";
console.log(jQuery.fn.jquery);

我的自定义 javascript 文件保存在 app/asets/javascripts 中。我将文件 app/assets/javascripts/test.js 创建为：

import jQuery from "jquery";

function test() {
    console.log(jQuery.fn.jquery)
}

最后，在我看来，我包括 test.js 并将功能分配给按钮：

<%= javascript_include_tag('test.js') %>
<button onclick="test()">Button</button>

在页面加载时，控制台显示以下错误：Uncaught SyntaxError: Cannot use import statement outside a module。我认为这意味着文件 test.js 没有被 ES6 编译器处理。如何确保 app/assets/javascript 中的 javascript 文件被正确编译？

Answer 1

如果您正在使用 webpacker 并且想在 views/layouts 中包含 js 文件，那么您必须使用 javascript_pack_tag。所有这些文件（称为 entries）都应位于 /packs 下（或者您在 webpacker.yml 中设置 source_path 和 source_entry_path 的位置）。条目应该导入或需要不同的文件（将它们捆绑），然后 webpacker 将准备它们以便浏览器就绪（babel、加载器、转译等）

创建 app/javascript/packs/test.js 并添加这些：

 require('app/assets/javascripts/test.js')

这应该可以解决编译问题。 Webpacker 在 webpacaker.yml 中有 resolved_paths: []，您可以在其中添加不同的路径来查找文件。您可以添加 app/assets/javascripts 并更改为：

require('test.js')

现在点击那个按钮。如果你想那样做，那么 test() 应该在 window 上。另一种选择是在文档就绪时为该按钮绑定一个 onClick 事件。还有其他选择，但这两个是简单的选择。

Javascript 在 Ruby 中编译 Rails 6

Javascript compilation in Ruby on Rails 6

javascript

ruby-on-rails

ecmascript-6

webpacker