在帶有 webpacker 的 Rails 6 中使用 wow.js 的正確方法是什么？

Question

我正在嘗試在 Rails 6.1.3.2 項目上將 wow.js與我的 Ruby 一起使用。 我已經用 Yarn 安裝了 wowjs，我在我的 node_modules 文件夾中看到了它。

我已將 wowjs 導入我的應用程序 app/javascript/packs/application.js

import WOW from 'wowjs';
require("wowjs/css/libs/animate.css") 

我有一個位於此路徑的 script.js 文件：app/javascript/script.js 並啟動 WOW

    wow = new WOW({
        animateClass: 'animated',
        offset: 100
    });
    wow.init();

在 wowjs 像這樣導入之后 script.js 被導入到 app/javascript/packs/application.rb 中：

import WOW from 'wowjs';
require("wowjs/css/libs/animate.css")
import "scripts.js"

我在控制台中不斷收到以下錯誤：

scripts.js:514 Uncaught ReferenceError: WOW is not defined
at Object.<anonymous> (scripts.js:514)
at Object../app/javascript/scripts.js (scripts.js:897)
at __webpack_require__ (bootstrap:63)
at Module../app/javascript/packs/application.js (application.js:1)
at __webpack_require__ (bootstrap:63)
at bootstrap:198
at bootstrap:198

我有以類似方式安裝的其他模塊，它們不會引發錯誤。 我想了解這樣做的“導軌方式”是什么。 提前感謝你的幫助。

Answer 1

通過 yarn 安裝 jquery，wowjs，將這一行添加到app/javascript/packs/application.js ：

window.WOW = require('wowjs').WOW;

通過添加到app/assets/stylesheets/application.scss這一行來嵌入 wow css 到項目中：

 @import "wowjs/css/libs/animate";

最后創建這個視圖示例app/views/pages/home.html.erb ：

Welcome to project railstrace !
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">ABC</section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">DEF</section>

<script>
  new WOW({live: false}).init()
</script>

注意：如果設置new WOW({live: false}).init()將刪除此警告：您的瀏覽器不支持 MutationObserver。

享受！

Answer 2

這個問題的答案最終如下：

將 import 語句從 application.js 移動到正在使用模塊的 scripts.js：

import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";

我錯過了“哇”作為“var”的聲明。 所以我像這樣在 script.js 中添加了“var”：

var wow = new WOW({
    animateClass: 'animated',
    offset: 100
});
wow.init();

對我來說，關鍵的教訓是導入語句需要位於使用模塊的腳本的頂部。 我曾假設僅將它們導入到 application.js 中就足以使它們可用於所有腳本。 也許那是一個新手課程。 非常感謝@rossta 的一些重要指導。 我期待着他即將到來的 Webpacker 課程。