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

Posted

技术标签:

【中文标题】如何通过 Webpacker 使用 Rails 6.1 安装 Alpine JS 3【英文标题】:How to Install Alpine JS 3 with Rails 6.1 via Webpacker 【发布时间】:2022-01-07 12:07:14 【问题描述】:

自从 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_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 在我的html 标头中加载我的javascript。

但是,这仍然行不通。 AlpineJS NPM 包是否不能与 webpacker 和 Rails 一起使用?

如何让这个工作而不是从 Alpine JS CDN 加载?


更新:

我确保运行 yarn add alpinejsyarn 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)

【问题讨论】:

【参考方案1】:

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 更好的选择。

【讨论】:

【参考方案2】:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

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

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

【讨论】:

请尝试一下。我做到了,但无法让它发挥作用。我还将它包装在 turbolinks:loaded 回调中。遇到一些奇怪的错误,....catch 未定义。 是的,以这种方式导入模块不起作用。

以上是关于如何通过 Webpacker 使用 Rails 6.1 安装 Alpine JS 3的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Rails 6 和 webpacker 中使用 morris.js?

你如何让 JQuery 与 Rails 6 和 Webpacker 6 一起工作

您可以使用 Webpacker 在 Rails 6 应用程序中直接使用 Web3.js 吗?

Rails 5/6:如何在 webpacker 中包含 JS 函数?

如何将 Rails 6 中的 JqTree 与 webpacker 集成,树不是函数

如何在 rails 6/webpacker 中引用 scss 文件路径?