Ruby on Rails 6 中的 Javascript 编译

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

创建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 事件。还有其他选择，但这 2 个是简单的。