Ruby on Rails 6 中的 Javascript 编译

如何解决Ruby on Rails 6 中的 Javascript 编译

我使用的是 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 文件正确编译？

解决方法

如果您使用 webpacker 并且想要在视图/布局中包含 js 文件，那么您必须使用 javascript_pack_tag。所有这些文件（称为 entries）都应该在 /packs 下（或者您在 source_path 中设置 source_entry_path 和 webpacker.yml 的位置）。这些条目应该导入或需要不同的文件（捆绑它们），然后 webpacker 会将它们准备好以供浏览器使用（babel、loader、transpiling 等。）

创建 app/javascript/packs/test.js 并添加以下内容：

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

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

require('test.js')

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