如何通过 Webpacker 安装 Alpine JS 3 和 Rails 6.1

Question

自从 AlpineJS 升级到Alpine 3以来，我一直无法让它与 Rails 6 和 webpacker 一起工作，我只能在链接到 CDN 版本的 Alpine 时才能使其工作。

过去使用 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 加载到我的 html 标头中<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>。

但是，这仍然行不通。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)

Answer 1

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

看来您需要使用 import 来导入模块。

参考：https: //alpinejs.dev/essentials/installation