RubyonRails6中的Javascript编译

我正在使用Ror6.1.0，并希望添加一个Javascript库。作为测试用例，我将尝试添加JQuery。我正在使用webpacker管理我的应用程序中的Javascript库

首先，我使用Thread将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:无法在模块外部使用import语句
。我认为这意味着ES6编译器没有处理文件
test.js
。如何确保
app/assets/javascript
中的javascript文件已正确编译？
如果您使用
webpacker
并且希望在视图/布局中包含js文件，则必须使用。所有这些文件（称为
条目
）都应该在
/packs
下（或者在
webpacker.yml中设置
源路径
和
源条目路径
）。条目应导入或需要不同的文件（捆绑），然后webpacker将准备好这些文件以备浏览器使用（babel、loaders、transpiling等）

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

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

这将解决补偿问题。Webpacker在
Webpacker.yml
中有
解析路径：[]
，您可以在其中添加不同的路径来查找文件。您可以添加
app/assets/javascripts
并更改为：

require('test.js')

现在点击那个按钮。如果您想这样做，那么
test（）
应该在
窗口上。另一个选项是在文档就绪时为该按钮绑定onClick事件。还有其他选择，但这两个是最简单的。
是的，这很有意义！由于webpacker入口点是
app/javascript/packs
，因此我将所有javascript都移动到了那里，并将其从
app/assets/javascript
中删除。将AssetTagHelper从
javascript\u include\u标记
更改为
javascript\u pack\u标记
，成功了。非常感谢。