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

Question

我使用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 找不到在 application.js

中声明的 stepper

Answer 1

问题是我设置 Stepper

实例的方式

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

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

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

how to install bs-stepper with webpacker in rails 6?

javascript

ruby-on-rails

webpack

turbolinks

webpacker