繁体   English   中英

如何通过 Webpacker 安装带有 Rails 6.1 的 Alpine JS 3

[英]How to Install Alpine JS 3 with Rails 6.1 via Webpacker

自从 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 package 是否不适用于 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)
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

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

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

AlpineJS 3 需要 webpack 5 ,因此需要(当前)未发布的webpacker 6 ,因此您可以尝试使用 webpacker 6 的候选版本或使用 CDN 版本的 AlpineJS 3。

好像是版本不兼容的问题。。。

在 package.json 中将特定版本设置为 alpine 和 alpine-turbo-drive-adapter:

"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();
});

我希望这个对你有用!

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM