如何在 rails 6 中使用 webpacker 安装 bs-stepper？

问题描述

我已使用 yarn add bs-stepper

安装它

并且我已将库加载到我的 environment.js

const { environment } = require("@rails/webpacker");

const webpack = require("webpack");

environment.plugins.append(
  "Provide",new webpack.ProvidePlugin({
    $: "jquery",jQuery: "jquery",Popper: ["popper.js","default"],Stepper: "bs-stepper",})
);

module.exports = environment;

而且我已经在我的 pack/application.js

上创建了一个实例

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
import "bootstrap";
import "../stylesheets/application";
require("admin-lte");
import "@fortawesome/fontawesome-free/js/all";

document.addEventListener("turbolinks:load",() => {
  $('[data-toggle="tooltip"]').tooltip();
  var stepper = new Stepper($(".bs-stepper")[0]);
});

Rails.start();
Turbolinks.start();
ActiveStorage.start();

require("trix");
require("@rails/actiontext");
import "controllers";

但是当我点击这个按钮时代码不起作用

<button class="btn btn-primary" onclick="stepper.next()">Next</button>

我遇到了这个错误

(index):223 Uncaught ReferenceError: stepper is not defined
    at HTMLButtonElement.onclick ((index):223)

我认为这是因为我的 html 找不到在 stepper

中声明的 application.js

解决方法

问题是我设置 Stepper 实例的方式

我需要像这样显式地将它附加到 window 的变量

document.addEventListener("turbolinks:load",() => {
  $('[data-toggle="tooltip"]').tooltip();
  window.stepper = new Stepper($(".bs-stepper")[0]);
});