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

Question

我刚开始使用 pixi.js，它看起来很棒！ 但我不能让它完全与 Gulp 和 WebPack 一起工作......

在 Chrome (Mac) 上，一切正常，但在 Safari (iPhone) 上我收到此错误：fs.readFileSync is not a function 来自 function FXAAFilter。 当我使用 forceFXAA: true 时，我在桌面上遇到同样的错误。

我的 gulp 脚本任务：

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