Duplicata du #1854 ?

C'est similaire, mais maintenant le problème est de savoir pourquoi définir
require('pixi.js')

node: {
    fs: "empty"
}

Tout fonctionne bien, mais je n'aime pas #1854, il affiche Uncaught TypeError: fs.readFileSync is not a function dans certaines fonctions comme BlurFilter

En outre ,

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

Si je supprime include: path.join(__dirname, 'node_modules', 'pixi.js'),
pixi fonctionne toujours.

mais même problème Uncaught TypeError: fs.readFileSync is not a function

Je ne connais rien à Webpack. Vous devez avoir une transformation qui résout les readFileSyncs dans les chaînes réelles du fichier comme le fait la transformation browserify.

Voici mon webpack.config de travail :

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;

Fermeture comme résolu.

C'est l'exemple le plus direct et le plus simple de configuration de webpack avec PIXI que j'ai trouvé.

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

Je recommande de mettre à jour le champ main de package.json pour référencer les fichiers construits dans bin . C'est une bibliothèque que la plupart des gens vont utiliser sur le client. Il semble un peu étrange qu'il n'interagisse pas avec tous les outils de construction populaires prêts à l'emploi.

Beaucoup (la plupart ?) d'autres bibliothèques côté client populaires référencent les fichiers construits dans package.json pour éviter des problèmes comme celui-ci.

Il fonctionne avec browserify prêt à l'emploi, ainsi qu'avec webpack avec la configuration appropriée. Webpack lui-même vous recommande de _ne_ pas_ pointer vers le fichier construit, mais plutôt vers la source et configurer les transformations appropriées.

Probablement à l'avenir, nous essaierons d'utiliser des transformations plus "compatibles avec les packs Web", ou d'inclure la configuration nécessaire dans notre package json afin que vous n'ayez pas à l'écrire (comme nous le faisons pour browserify). Mais dire que cela ne fonctionne pas avec les constructeurs populaires prêts à l'emploi n'est tout simplement pas vrai, webpack est le seul dont vous avez besoin d'un peu de configuration pour fonctionner.

@supermrji cela ne fonctionne pas immédiatement avec webpack.

Vous ne comprenez pas, comment ce problème a finalement été résolu? Vous avez le même problème lorsque vous essayez d'utiliser du savon à partir de l'application React.

@aasten J'ai le même problème avec le savon et VUE-CLI ... l'avez-vous résolu?

@ Crawler158 non, désolé.

rien?

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.