Pixi.js: Webpack - 未捕获的类型错误：fs.readFileSync 不是函数

创建于 2015-09-02 · 14评论 · 资料来源: pixijs/pixi.js

Webpack.config.js

node: {
    fs: "empty"
},
module: {
    loaders: [{
        test: /\.json$/,
        include: path.join(__dirname, 'node_modules', 'pixi.js'),
        loader: 'json'
    }, {
        test: /\.js$/,
        exclude: path.join(__dirname, 'node_modules'),
        loader: 'babel'
    }, {
        test: /\.png$|\.jpe?g$|\.gif$|img\/.*\.svg$/,
        loader: 'file?name=' + opts.img
    }],
    noParse: /\.min\.js/
},

这是显示Uncaught TypeError: fs.readFileSync is not a function

如果我删除

node: {
    fs: "empty"
}

它去Uncaught Error: Cannot find module "fs"

在我的主脚本中main.js

import PIXI from 'pixi.js'; // use ES6 width Babel   from npm  pixi.js

我在使用new PIXI.filters.BlurFilter()时发现它

但如果我使用https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js" cdn 链接
没关系。

Wepack 是否需要设置任何选项？

资料来源

supermrji

👍9

最有用的评论

不明白，这个问题最后是怎么解决的？尝试在反应应用程序中使用肥皂时遇到同样的问题。

aasten 于 2017-11-30

👍2

所有14条评论

重复#1854？

englercj 于 2015-09-02

很相似，但现在的问题是为什么设置
require('pixi.js')

node: {
    fs: "empty"
}

一切正常，但不喜欢 #1854 ，它在某些函数中显示Uncaught TypeError: fs.readFileSync is not a function ，如BlurFilter

此外，

loaders: [{
    test: /\.json$/,
    include: path.join(__dirname, 'node_modules', 'pixi.js'),
    loader: 'json'
}

如果我删除include: path.join(__dirname, 'node_modules', 'pixi.js'),
pixi 还在工作。

但同样的问题Uncaught TypeError: fs.readFileSync is not a function

supermrji 于 2015-09-03

我对 webpack 一无所知。您需要有一个转换，将 readFileSyncs 解析为文件的实际字符串，就像 browserify 转换所做的那样。

englercj 于 2015-09-03

这是我的工作 webpack.config：

var webpack = require("webpack");

var path = require("path");

var config = {
    target: "web",
    debug: true,
    devtool: "source-map",
    entry: {
        main: "./source/scripts/main"
    },
    output: {
        path: "./build",
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    },
    node: {  // this is for pixi.js 
        fs: "empty"
    },
    resolve: {
        modulesDirectories: ['web_modules', 'bower_components', 'node_modules']
    },
    module: {
        loaders: [
            { test: /\.css/, loader: "style-loader!css-loader" },
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel?optional[]=runtime&stage=0'},
            { test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png" },
            { test: /\.gif/, loader: "url-loader?limit=100000&mimetype=image/gif" },
            { test: /\.jpg/, loader: "file-loader" },
            { test: /\.json/, loader: "json-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin(),
        //new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            __DEV__: true
        })
    ]
};
module.exports = config;