使用Browserify与GreenSock技术

Question

我无法让TweeLite与browserify一起工作。当涉及到CommonJS时，我是一个极其新手。

我已经使用Bower安装了gasp v1.13.2，并像这样包含它：

var TweenLite = require("../../bower_components/gsap/src/minified/TweenLite.min.js");

我使用它时没有收到任何错误，但我的动画不起作用。根据gsap文档，这个版本应该可以在不使用shim的情况下工作。我做错了什么？有人能提供一个可行的例子吗？

https://greensock.com/gsap-1-13-1

我刚开始一个项目，所以没有有趣的代码可以展示。我正在使用gulp-starter脚手架。

- mynameisnotallowed

---

请确保您还包括cssHook，据我所记，这是用于通过CSS3转换或JavaScript动画进行动画处理的，具体取决于浏览器支持情况。https://dev59.com/d3nZa4cB1Zd3GeqPwO7G - Tim Vermaelen

谢谢，但这不是问题所在。当我在文档正文中包含相同的src文件并引用window.TweenLite时，我的动画可以正常工作。 - mynameisnotallowed

你能在jsfiddle.net上创建一个fiddle吗？ - stackErr

我不知道该怎么做，因为Browserify代码没有服务器进行正确的插值，所以无法正常工作？ - mynameisnotallowed

点赞给这个用户名！！ :) - styler

Answer 1

尝试使用未压缩的GSAP库。我通过browserify并使用bower安装成功。像这样：

var TweenLite = require('../bower_components/gsap/src/uncompressed/TweenLite.js');
var TimelineLite = require('../bower_components/gsap/src/uncompressed/TimelineLite.js');
var CSSPlugin = require('../bower_components/gsap/src/uncompressed/plugins/CSSPlugin.js');

但是，如果我切换到压缩的构建版本，browserify 就无法找到这些模块了。

看起来生成压缩后的代码时使用的压缩方法破坏了模块导出。

- paldepind

---

可以的。但您可以轻松地将其与源代码的其余部分进行代码压缩。 - paldepind

Answer 2

GSAP也可以通过NPM获取，因此您应该能够通过以下方式安装：

npm install gsap --save

并且像在 gulp-starter 项目中引用其他库一样使用它，例如在 view.coffee 文件中：

_          = require 'underscore'
Backbone   = require 'backbone'
Backbone.$ = require 'jquery'
plugin     = require 'plugin'
//this line below makes TweenLite available in the browser in my quick tests.
gsap       = require 'gsap'

- jimbo.io

---

这个方法可行，但意味着我会包括所有四个库以及其他所有插件，而不仅仅是TweenLite。这将增加大约900kb的代码大小，这是无法接受的。 - mynameisnotallowed

这不是真的。require('gsap') 就等同于仅仅包含 TweenMax.js。 - fregante