如何将pixi.js与gulp和包括FXAA的webpack一起使用

Question

我刚刚开始使用pixi.js，它看起来棒极了！但是我不能完全和Gulp和WebPack一起工作。

在Chrome (Mac)上，一切都可以工作，但在Safari (iPhone)上，我得到了这样的错误：fs.readFileSync is not a function from function FXAAFilter。当我使用forceFXAA: true时，我在桌面上得到了同样的错误。

我的吞咽脚本任务：

gulp
    .src(config.scripts.src)
    .pipe(gulp_webpack({
        node: {
            fs: "empty"
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /(nodes_modules)/,
                    loader: "babel-loader",
                    query: {
                        presets: ["es2015"]
                    }
                },
                {
                    test: /\.json$/,
                    loader: "json"
                }
            ],
            postLoaders: [
                {
                    include: path.resolve(__dirname, "nodes_modules/pixi.js"),
                    loader: "transform?brfs"
                }
            ]
        },
    }))
    .pipe(gulp_concat(config.scripts.out))
    .pipe(gulp.dest(config.scripts.dst));

Answer 1

这是因为webpack包含了实际的文件操作(应该在编译时运行)，该操作用于将WebGL碎片文件包含到JS包中。我的猜测是，您只在PIXI使用GL渲染器的环境中看到错误。

尝试npm install transform-loader brfs --save并将以下内容添加到您的配置中：

module.exports = {
    context: __dirname,
    entry: "./index.js",
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "transform?brfs"
            }
        ]
    }
}

来源：https://github.com/webpack/transform-loader