如何解决splitting.js 在 Rails 6
我在我的 Rails 6 项目中使用了 splitting.js javascript 库。当我尝试加载页面时,我在控制台中收到“Uncaught TypeError: Splitting is not a function”。
我已经使用 Yarn 安装了 javascript 库:
yarn add splitting
Splitting()
在我的 applicaiton.js 文件中需要的 scripts.js 中的其他 Javascript 被调用。我已经以多种方式配置了我的 application.js 文件以尝试解决该问题,但无济于事。这是我当前对该文件的迭代(包括整个文件,以防有其他交互需要考虑):
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
import "@fortawesome/fontawesome-free/css/all"
require("@fortawesome/fontawesome-free/css/fontawesome.css")
// bootstrap css files get loaded by this. This seems to be problematic.
// import "css/site"
import "isotope-layout"
import "justifiedGallery"
require("justifiedGallery/dist/css/justifiedGallery.css")
// https://splitting.js.org
window.Splitting = require('splitting/dist/splitting').Splitting;
import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
// import Splitting from "splitting/dist/splitting";
import "pace"
// https://simpleparallax.com/
import simpleParallax from "simple-parallax-js"
//https://swiperjs.com/get-started
//import Swiper from 'swiper/bundle';
window.Swiper = require('swiper/bundle').Swiper
require("swiper/swiper-bundle.css")
//https://github.com/graingert/wow
//import WOW from 'wowjs';
window.WOW = require('wowjs').WOW;
require("wowjs/css/libs/animate.css")
//https://greensock.com/docs/v3/Installation for animation
import gsap from "gsap/dist/gsap"
import MotionPathPlugin from "gsap/dist/MotionPathPlugin"
//http://kottenator.github.io/jquery-circle-progress/
import "jquery-circle-progress/dist/circle-progress"
// https://github.com/kenwheeler/slick
// window.slick = require('slick-carousel').slick;
import slick from "slick-carousel"
require("slick-carousel/slick/slick.css")
require("slick-carousel/slick/slick-theme.css")
// https://github.com/ionic-team/ionicons
import "ionicons"
// SMC custom libraries that came with template
require ("map.js")
require ("scripts.js")
Rails.start()
Turbolinks.start()
ActiveStorage.start()
这是scripts.js文件的相关部分:
// ...
Splitting();
// ...
这是我的配置 > webpack > environment.js 文件:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',new webpack.ProvidePlugin({
$: 'jquery/src/jquery',jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
请提供您对如何解决此问题的见解。谢谢
解决方法
感谢@rossta 的帮助,我解决了这个问题。我需要将 splitting.js 模块的所有 import 语句从 application.js 移动到调用该模块的 script.js 文件中。所以我在scripts.js的顶部添加了以下内容:
import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。