Javascript 在Rails 6中使用wow.js和webpacker的正确方法是什么?
我正在尝试使用RubyonRails 6.1.3.2项目。我已经用Thread安装了wowjs,并在我的node_modules文件夹中看到了它 我已将wowjs导入我的应用程序app/javascript/packs/application.jsJavascript 在Rails 6中使用wow.js和webpacker的正确方法是什么?,javascript,ruby-on-rails,ruby-on-rails-6,webpacker,wow.js,Javascript,Ruby On Rails,Ruby On Rails 6,Webpacker,Wow.js,我正在尝试使用RubyonRails 6.1.3.2项目。我已经用Thread安装了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并启动W
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"
var wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
我在控制台中不断收到以下错误:
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
scripts.js:514未捕获引用错误:未定义WOW
反对。(scripts.js:514)
位于Object../app/javascript/scripts.js(scripts.js:897)
at\uuuuu网页包\uuuuuuuuuuuuu需要(引导:63)
位于Module../app/javascript/packs/application.js(application.js:1)
at\uuuuu网页包\uuuuuuuuuuuuu需要(引导:63)
自动引导时:198
自动引导时:198
我以类似的方式安装了其他模块,这些模块不会抛出错误。我想了解做这件事的“rails方式”。提前感谢您的帮助。安装jquery,wowjs by Thread,将此行添加到
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>
欢迎来到railstrace项目!
基础知识
DEF
新建WOW({live:false}).init()
注意:如果设置新WOW({live:false}).init()将删除此警告:您的浏览器不支持MutationObserver
享受吧 这个问题的最终答案是: 将导入语句从application.js移动到使用模块的scripts.js:
import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";
我错过了“哇”作为“变量”的声明。因此,我在script.js中添加了“var”,如下所示:
import WOW from 'wowjs';
require("wowjs/css/libs/animate.css")
import "scripts.js"
var wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
对我来说,关键的一课是import语句需要位于使用模块的脚本的顶部。我认为,只要将它们导入application.js,就足以让所有脚本都可以使用它们。也许这是个新手的教训。非常感谢@rossta提供的一些重要指导。我期待着他很快参加Webpacker课程。谢谢!这对我有用。通过在application.js文件中添加这一行
require(“wowjs/css/libs/animate.css”)