Gulp 和 Pixi.js - ReferenceError：未定义窗口

Question

我最近切换到 gulp 并想尝试 pixi.js，我一直在使用 pixi 的 cdn，但现在我希望 pixi-timer 延迟某些功能。

所以我想，为什么不开始用 gulp 捆绑所有这些呢？

但是我遇到了以下错误：

ReferenceError: 未定义窗口

我认为最新版本的 pixi.js 支持 gulp 甚至 browserify，但是当我尝试要求 pixi.js 时它失败了。

有什么建议吗？

我的 gulp 文件：

var gulp = require('gulp');
var concat = require('gulp-concat');
 var PIXI = require('pixi.js');
// var timer = require('pixi-timer');
var browserify = require('gulp-browserify');


gulp.task('game', function(){
    return gulp.src('interface/js/gamelogic/**/*.js')
    .pipe(concat('game.js'))
    .pipe(gulp.dest('Vamp.Website/Resources/'));
});

gulp.task('default', function(){
    gulp.watch('interface/js/gamelogic/**/*.js', ['game']);
});

完整的错误日志：

D:\Stuff\Vamp\vamp\Vamp>gulp D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\polyfill\index.js:5 如果（！window.ArrayBuffer）{ ^

ReferenceError: 未定义窗口 在对象。 (D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\polyfill\index.js:5:5) 在 Module._compile (module.js:413:34) 在 Object.Module._extensions..js (module.js:422:10) 在 Module.load (module.js:357:32) 在 Function.Module._load (module.js:314:12) 在 Module.require (module.js:367:17) 在要求（内部/module.js:16:19） 在对象。 (D:\Stuff\Vamp\vamp\Vamp\node_modules\pixi.js\src\index.js:2:1) 在 Module._compile (module.js:413:34) 在 Object.Module._extensions..js (module.js:422:10)

D:\Stuff\Vamp\vamp\Vamp>

Answer 1

您需要删除此行：

var PIXI = require('pixi.js');

在这里，您在 gulp 构建期间需要 pixi.js。这是错误的，有几个原因。

1. 您实际上并没有在 gulpfile 中的任何位置使用 PIXI 做任何事情。那你为什么需要它？
2. PixiJs 是一个针对浏览器的 WebGL 渲染器。您的 gulp 构建在没有 window 对象的 node.js 中运行。这就是您收到该错误的原因。
3. 您想将pixi.js 和其他文件捆绑到一个game.js 文件中。您不需要为此要求pixi.js。您只需要将您的pixi.js 安装路径传递给gulp.src()，如下所示：

gulp.task('game', function(){
  return gulp.src([
    'node_modules/pixi.js/bin/pixi.js',
    'interface/js/gamelogic/**/*.js'
  ])
  .pipe(concat('game.js'))
  .pipe(gulp.dest('Vamp.Website/Resources/'));
});