如何使用 pixi.js 与 gulp 和 webpack 包括 FXAA

Question

我刚开始小精灵.js看起来很棒！但我不能让它完全与 Gulp 和 WebPack 一起工作......

在Chrome（Mac）上，一切正常，但在Safari（iPhone）上，我收到此错误：fs.readFileSync is not a function来自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