在带有 webpacker 的 Rails 6 中使用 wow.js 的正确方法是什么？答案

【问题标题】：What is the correct way to use wow.js in Rails 6 with webpacker?在带有 webpacker 的 Rails 6 中使用 wow.js 的正确方法是什么？
【发布时间】：2021-08-16 22:13:50
【问题描述】：

我正在尝试在我的 Ruby on Rails 6.1.3.2 项目中使用 wow.js。我已经用 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

我以类似的方式安装了其他没有引发错误的模块。我想了解这样做的“导轨方式”是什么。提前感谢您的帮助。

【问题讨论】：

标签： javascript ruby-on-rails ruby-on-rails-6 webpacker wow.js

【解决方案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。

享受吧！

【讨论】：

谢谢！这对我有用。通过添加此行require("wowjs/css/libs/animate.css")，我还能够通过在 application.js 文件中要求 css 来避免资产管道

【解决方案2】：

这个问题的答案最终如下：

将 import 语句从 application.js 移动到正在使用模块的 scripts.js：

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

我错过了将 'wow' 声明为 'var' 的声明。所以我像这样在 script.js 中添加了“var”：

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

对我来说，关键的教训是导入语句需要位于使用模块的脚本的顶部。我曾假设仅将它们导入到 application.js 中就足以使它们可用于所有脚本。也许那是一个新手课程。非常感谢@rossta 的一些重要指导。我期待着他即将到来的 Webpacker 课程。

【讨论】：