将 greensock 与 browserify 一起使用答案

【问题标题】：Using greensock with browserify将 greensock 与 browserify 一起使用
【发布时间】：2014-10-12 12:45:25
【问题描述】：

我无法让 TweeLite 与 browserify 一起工作。说到 CommonJS，我是一个极端的菜鸟。

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

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

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

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

我刚刚开始一个项目，所以我没有任何有趣的代码要展示。我正在使用gulp-starter 样板。

【问题讨论】：

确保您还包括 cssHook，据我所知，它用于通过 CSS3 过渡或 javascript 动画制作动画，具体取决于浏览器支持。 stackoverflow.com/questions/20411730/tweenlite-does-not-animate
谢谢，但这不是问题所在。当我在文档正文中包含相同的 src 文件并引用 window.TweenLite 时，我的动画工作。
你能在 jsfiddle.net 上做个小提琴吗？
我不知道该怎么做，因为 browserify 代码在没有服务器插值的情况下无法工作，对吗？
为用户名点赞！！ :)

标签： javascript browserify commonjs gsap

【解决方案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 不再找到模块。

似乎用于生成缩小版本的压缩方法以某种方式破坏了模块导出。

【讨论】：

是的，确实如此。但是您可以使用其余的源代码轻松地缩小它。

【解决方案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'

【讨论】：

这可行，但这意味着我将包括所有四个库和所有其他附加组件，而不仅仅是 TweenLite。它在我的代码中增加了 ~900kb，这是不可接受的。
这不是真的。 require('gsap') 与包含 TweenMax.js 相同仅