自从AlpineJS升级到Alpine 3以来，我一直无法让它与Rails 6和webpacker一起工作，我只能在链接到Alpine的CDN版本时才能让它工作。
在过去的AlpineJS 2中，我只需要运行yarn add alpinejs，然后将require('alpinejs')放入javascript/packs/application.js中。
从我读到的所有内容来看，当使用Turbo on Rails 6.1时，我似乎需要这样做：
// Alpine JS
import 'alpine-turbo-drive-adapter'
require('alpinejs')
(显然是在安装软件包之后(。我正在用<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>将我的javascript加载到我的html头中。
但是，这仍然不起作用。AlpineJS NPM包是不是不适用于webpacker和Rails？
我如何让它工作，而不是从Alpine JS CDN加载？
更新：
我确保运行yarn add alpinejs和yarn add alpine-turbo-drive-adapter。我还更新了我的packs/application.js文件，以确保它使用的是Turbo，而不是Turbolinks。现在看起来是这样的：
import Rails from "@rails/ujs"
import "@hotwired/turbo"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
ActiveStorage.start()
import "controllers"
// Custom JS files
import 'alpine-turbo-drive-adapter'
import Alpine from "alpinejs"
window.Alpine = Alpine
Alpine.start()
// require("./components/direct_uploads")
require("stylesheets/application.scss")
在这两次更新之后，我现在得到了这个控制台错误：
TypeError: func(func, completeScope).catch is not a function. (In 'func(func, completeScope).catch(function (error2) {
return handleError(error2, el, expression);
})', 'func(func, completeScope).catch' is undefined)
AlpineJS 3需要webpack 5，因此需要(当前(未发布的webpack 6，因此您可以尝试使用webpacker 6的候选版本，或者暂时使用AlpineJS3的CDN版本。
作为替代方案，有一些新的gem可以与Rails一起使用，例如https://github.com/rails/jsbundling-rails和https://github.com/rails/importmap-rails.如果你想坚持使用webpack，那么jsbundling rails gem可能是现在比webpacker更好的选择。
它看起来像是一个不兼容的版本问题。。。
在package.json中，将特定版本设置为高山和高山涡轮驱动适配器：
"alpine-turbo-drive-adapter": "1.1.0",
"alpinejs": "3.2.3",
不要忘记删除您的(yarn.lock或package.json.lock(并运行(yarn-install或npm install(。
在application.js导入中：
import Alpine from 'alpinejs'
window.Alpine = Alpine
$(() => {
Alpine.start();
});
我希望它对你有用！
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
您似乎需要使用import来导入模块。
参考：https://alpinejs.dev/essentials/installation