Pixi.js: (v4) 使用 Webpack 时 GLSLify 错误

嗨@Adam-Meisen！ 这个问题现在出现了几次，我最近亲身经历过！ 我想是时候修复它了💃

用原始文本替换 glsify 会达到您认为的效果吗？ 我们还没有使用任何特定于 glslify 的东西..

欢迎提出想法！ 👍

我才刚刚发现这个库，所以恐怕我真的不知道 gslify 在内部是如何使用的，但从一些搜索来看，它似乎是一个非常模糊的错误消息，有很多潜在的原因。 你建议的可能会奏效。 虽然理想情况下我想弄清楚是什么导致了这种情况，但完全回避它可能不是一个坏主意。

尽管如此，我仍然没有设法让它工作，即使使用 ify-loader、browserify-versionify 和 glslify，所以我一直在使用库的 cdn 构建。

+1 修复它，现在我使用预构建版本
`从'pixi.js/bin/pixi.js'导入PIXI

我对 Webpack 不是很熟悉。 有人可以制作一个简单的测试项目/存储库来重现这个问题，以便我可以用来调试吗？

您可以使用以下方法重现此内容：

npm 安装 pixi.js webpack

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, 'scripts/'),
        filename: 'bundle.js'
    },
    node: {
        fs: 'empty'
    }
};

索引.js

var PIXI = require('pixi.js');
console.log(PIXI);
var renderer = new PIXI.WebGLRenderer(512, 512);

从项目的根文件夹：

webpack --config webpack.config.js

生成的 (projectroot)/scripts/bundle.js 可以在 Web 浏览器中访问，并且会重现 glslify 错误。 刚刚自己快速编写并测试了它，如果这不起作用，请告诉我，我会尽力为您修复它。

这里有一些关于此问题的问题已关闭，例如https://github.com/pixijs/pixi.js/issues/2439#issuecomment -243820323。 不确定 PIXI 如何在没有宿主项目上的这些自定义配置的情况下提供开箱即用的兼容性。

您可以通过使用以下配置使用 webpack 成功地要求它。 我只在 webpack 2.x 上测试过，但在 1.x 上也应该没问题。

webpack.config.js：

  module: {
    loaders: [
      /// ...
      { test: /node_modules\/pixi\.js/, loader: 'ify' },
    ]
  },

包.json：

"devDependencies": {
  "browserify-versionify": "^1.0.6",
  "glslify": "^5.1.0",
  "ify-loader": "^1.0.3",
  "pixi.js": "^4.0.0"
}

不幸的是，即使有了所有这些，它仍然对我不起作用。

@Adam-Meisen 这很奇怪。 你介意分享你的webpack.config.js和package.json以便我看看吗？ 干杯!

+1 我也有这个问题。 我现在遵循@stephanedemotte的临时解决方案（上图）。

嘿，抱歉让您久等了，我继续将我的项目缩减到合理的最低限度，以便尽可能轻松地识别问题。

正如您在package.json看到的那样，我已经包含了人们认为解决问题所必需的所有模块。

    "browserify-versionify": "^1.0.6",
    "glslify": "^5.1.0",
    "ify-loader": "^1.0.3",

https://gist.github.com/Adam-Meisen/db219b1815633400844b350788a11a6e

将文件保存到目录并运行webpack ，然后在浏览器中打开index.html或使用webpack-dev-server提供它。

@Adam-Meisen 嘿，对我来说看起来不错。 你对那个配置有任何错误吗？ 它在这里工作：

在 OSX 10.10.1 上运行，我的 Node 和 NPM 版本如下：

$ node --version
v6.3.0
$ npm --version
3.10.3

我在 Windows 上，运行节点 6.3.1 和 npm 3.10.6。

忘了提及我正在使用 OSX。 这个问题一定有关系： https :

@endel上述解决方案也不适用于我 - 与 @Adam-

@xTiming你能确认你使用的操作系统吗？

@endel Windows 10，使用 Chrome 作为浏览器。

@endel @xTiming 大家好。 我找到了一个方法。

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

窗口分隔符是 .
不像它的 osx。

它也可以在 window10 中看到。

@kimorkim发布的解决方案运行良好，但它弄乱了来自绝对类型的所有类型。 有没有办法将“pixi.js”别名为二进制版本？

对于打字，我指的是外部 js 文件。

  externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "pixi.js": "PIXI"
  },

import * as PIXI from "pixi.js";

我创建了一个示例共享。

https://github.com/ossas/sudoku_example2

告诉我你是否有问题

暂时关闭它，因为这里似乎有解决方案。 此外，对于 v5，我们将删除 glslfy 和可能的 browserify。

由于关闭后没有任何近期活动，因此该线程已自动锁定。 请为相关错误打开一个新问题。