如何将 ScrollMagic 与 GSAP 和 Webpack 一起使用
How To Use ScrollMagic with GSAP and Webpack
为了将ScrollMagic与GSAP一起使用,您需要加载animation.gsap.js
插件。使用 Webpack,您将执行类似操作来实现此目的(假设您使用 CommonJS 语法并使用 npm 安装所有内容):
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
为了确保这确实有效,您必须在 Webpack 配置中添加一个别名,以便 Webpack 知道插件所在的位置。
resolve: {
alias: {
'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
}
}
不幸的是,当您使用此配置和上述CommonJS语法时,ScrollMagic不断抛出错误。
(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js
解决方案
您必须通过添加以下停用define()
方法的加载程序来告诉 Webpack 停止使用 AMD 语法。
// Webpack 4+
module: {
rules: [
{ parser: { amd: false }}
]
}
// Webpack <= 3
// Don’t forget to install the loader with `npm install imports-loader --save-dev`
module: {
loaders: [
{ test: /'.js$/, loader: 'imports-loader?define=>false'}
// Use this instead, if you’re running Webpack v1
// { test: /'.js$/, loader: 'imports?define=>false'}
]
}
为什么?
问题在于 Webpack 支持 AMD(定义)和 CommonJS(require)语法。这就是为什么 plugins/animation.gsap.js
中的以下工厂脚本跳转到第一个 if 语句并静默失败的原因。这就是为什么setTween()
等永远不会添加到ScrollMagic Constructor中的原因。
通过告诉 Webpack 不支持 AMD 语法(使用上面提到的加载器),插件可以正确地跳转到第二个 if 语句,采用 CommonJS 语法。
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
} else if (typeof exports === 'object') {
// CommonJS
// Loads whole gsap package onto global scope.
require('gsap');
factory(require('scrollmagic'), TweenMax, TimelineMax);
} else {
// Browser globals
factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
}
我希望这可以防止其他人花一整晚的时间试图弄清楚发生了什么。
我遇到的不需要您更改 webpack.config.js 文件并且实际上对我有用的解决方案可以在这里找到:https://github.com/janpaepke/ScrollMagic/issues/665
它的要点是确保你通过npm(希望这是显而易见的)以及imports-loader添加了ScrollMagic和GSAP:
npm install --save scrollmagic gsap
npm install --save-dev imports-loader
然后在要将 ScrollMagic 与 GSAP 一起使用的文件中执行以下导入:
import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
使用 Webpack 4.x 和 imports-loader 0.8.0
Medoingthings解决方案已经改变了语法,包括"-loader"后缀。
module: {
loaders: [
{ test: /'.js$/, loader: 'imports-loader?define=>false'}
]
}
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
在imports-loader 1.1.0中,配置的语法发生了一些变化,所以现在你必须使用以下命令来使ScrollMagic插件工作:
{
test: [
path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js'),
path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
],
use: [
{
loader: 'imports-loader',
options: {
additionalCode: 'var define = false;'
}
}
]
}
希望这对其他人有所帮助。
我遇到了同样的问题并找到了这个问题。
对于那些使用 Webpack 5 的人来说,我相信导入加载器已经过时了,所以根据 webpack 文档,将此代码添加到您的 js 规则中以禁用 AMD:
{
test: /'.js$/,
include: /node_modules/,
parser: {
amd: false
}
}
文档:https://webpack.js.org/configuration/module/#ruleparser
- 将webpack和babel与父项目目录中的文件一起使用
- 将require('..')与变量一起使用与在webpack中使用字符串相比
- 避免将lib依赖项与webpack+handlebas加载程序捆绑在一起
- 用webpack把所有的部分放在一起
- 如何将遗留的js文件与webpack捆绑在一起
- 将node.js fs与Webpack一起使用
- webpack可以与旧版网页一起使用吗
- 将js应用程序与webpack捆绑在一起,以获得wordpress插件
- 不能不将 jimp 与 webpack 一起使用
- 如何将 ScrollMagic 与 GSAP 和 Webpack 一起使用
- 如何将同构的 commonJS 代码与 webpack 捆绑在一起
- 如何使用 NPM 安装 socket.io 与 TypeScript 和 webpack 一起使用
- 当将 JavaScript 与 Webpack 捆绑在一起时,require/import URL 开头的 @ 符号是什
- 无法使引导程序与 Webpack 一起工作
- 让React开发人员工具与Webpack一起工作
- 无法使引导程序sass与webpack一起使用
- 无法让vue-router与webpack一起工作
- 猫鼬不能与webpack一起工作
- 反应图标未加载与 webpack 一起
- 如何将 alasql 与 webpack 一起使用