在搭载webpacker的Rails 6项目中如何正确使用wow.js？

架构老林

2026-10-19

错误原因

该报错由ES模块的作用域隔离特性导致：每个JS模块都有独立作用域，你在application.js中导入的WOW变量仅在当前文件内有效，不会自动暴露给后续导入的scripts.js，因此scripts.js调用new WOW()时会触发变量未定义错误。

符合Rails规范的实现方案

方案1：直接在application.js完成初始化（最推荐）

无需拆分独立的初始化文件，直接把WOW初始化逻辑写在导入语句之后即可：

// app/javascript/packs/application.js
import WOW from 'wowjs';
require("wowjs/css/libs/animate.css")

// 直接初始化
const wow = new WOW({
  animateClass: 'animated',
  offset: 100
});
wow.init();

// 其他业务逻辑导入放在后面即可

方案2：需要拆分独立初始化文件的场景

如果确实要把WOW初始化逻辑拆分到单独文件，可选以下两种实现：

方式A：给初始化文件单独导入依赖

修改app/javascript/scripts.js（注意文件名和导入语句保持一致），在顶部先导入WOW：

// app/javascript/scripts.js
import WOW from 'wowjs';

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

此时application.js无需单独导入WOW，直接引入初始化文件即可：

// app/javascript/packs/application.js
import "scripts.js"

方式B：挂载到全局作用域（适配老旧代码）

如果你的scripts.js存在其他依赖全局变量的历史代码，可以选择把WOW暴露到全局window对象：

// app/javascript/packs/application.js
import WOW from 'wowjs';
window.WOW = WOW; // 挂载到全局后所有模块都可访问
require("wowjs/css/libs/animate.css")
import "scripts.js"