Duplikat von #1854?

Es ist ähnlich, aber jetzt ist das Problem, warum eingestellt
require('pixi.js')

node: {
    fs: "empty"
}

Es funktioniert alles gut, aber ich mag #1854 nicht, es zeigt Uncaught TypeError: fs.readFileSync is not a function in einer Funktion wie BlurFilter

Zusätzlich ,

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

Wenn ich include: path.join(__dirname, 'node_modules', 'pixi.js'), remove entferne
pix funktioniert noch.

aber gleiches Problem Uncaught TypeError: fs.readFileSync is not a function

Ich habe keine Ahnung von Webpack. Sie benötigen eine Transformation, die die readFileSyncs in die tatsächlichen Zeichenfolgen der Datei auflöst, wie dies bei der browserify-Transformation der Fall ist.

Hier ist meine funktionierende 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;

Schließen als gelöst.

Dies ist das direkteste und einfachste Beispiel für die Konfiguration von Webpack mit PIXI, das ich gefunden habe.

https://gist.github.com/mjackson/ecd3914ebee934f4daf4

Ich empfehle, das Feld main von package.json zu aktualisieren, um auf die erstellten Dateien in bin zu verweisen. Dies ist eine Bibliothek, die die meisten Leute auf dem Client verwenden werden. Es erscheint ein wenig seltsam, dass es nicht mit allen gängigen Build-Tools kompatibel ist.

Viele (die meisten?) andere beliebte clientseitige Bibliotheken verweisen auf die erstellten Dateien in package.json, um solche Probleme zu vermeiden.

Es funktioniert sowohl mit browserify out of the box als auch mit Webpack mit der richtigen Konfiguration. Webpack selbst empfiehlt, _nicht_ auf die erstellte Datei zu verweisen, sondern auf die Quelle und die richtigen Transformationen zu konfigurieren.

Wahrscheinlich werden wir in Zukunft versuchen, "webpack-freundlichere" Transformationen zu verwenden oder die erforderliche Konfiguration in unser Paket json aufzunehmen, damit Sie sie nicht schreiben müssen (wie wir es für browserify tun). Aber zu sagen, dass es mit gängigen Buildern nicht sofort funktioniert, ist einfach nicht wahr, Webpack ist das einzige, für das Sie ein wenig Konfiguration benötigen, um es zum Laufen zu bringen.

@supermrji es funktioniert nicht sofort mit Webpack.

Kann nicht verstehen, wie dieses Problem endlich gelöst wurde? Habe das gleiche Problem beim Versuch, Seife aus der Reaktionsanwendung heraus zu verwenden.

@aasten Ich habe das gleiche Problem mit Seife und VUE-CLI ... hast du es gelöst?

@Crawler158 nein, tut mir leid.

nichts?

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen in letzter Zeit keine Aktivität stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.