自从 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' %>
在我的 html header 中加载我的 javascript .但是,这仍然行不通。 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,因此(当前)未发布 webpacker 6 ,所以你可以尝试使用 webpacker 6 的候选版本,或者暂时使用 AlpineJS 3 的 CDN 版本。
作为替代方案,有一些新的 gem 可以与 Rails 一起使用,例如 https://github.com/rails/jsbundling-rails和 https://github.com/rails/importmap-rails .如果你想坚持使用 webpack,那么现在 jsbundling-rails gem 可能是比 webpacker 更好的选择。
关于javascript - 如何通过 Webpacker 使用 Rails 6.1 安装 Alpine JS 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70175064/