Pixi.js: Webpack - TypeError não capturado: fs.readFileSync não é uma função

Criado em 2 set. 2015  ·  14Comentários  ·  Fonte: 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/
},

É show Uncaught TypeError: fs.readFileSync is not a function

Se eu remover

node: {
    fs: "empty"
}

Vai Uncaught Error: Cannot find module "fs"

no meu script principal main.js

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

Eu encontrei quando uso new PIXI.filters.BlurFilter()

mas se eu usar https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js" CDN ligação
Está tudo bem .

Alguma opção para Wepack precisa ser definida?

Comentários muito úteis

Não consigo entender, como esse problema foi resolvido finalmente? Tenho o mesmo problema ao tentar usar sabão de dentro da aplicação de reação.

Todos 14 comentários

Duplicado de # 1854?

É semelhante, mas agora o problema é por que definir
require('pixi.js')

node: {
    fs: "empty"
}

Tudo funciona bem, mas não como # 1854, mostra Uncaught TypeError: fs.readFileSync is not a function em alguma função como BlurFilter

Além disso ,

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

Se eu remover include: path.join(__dirname, 'node_modules', 'pixi.js'),
pixi ainda funciona.

mas o mesmo problema Uncaught TypeError: fs.readFileSync is not a function

Não sei nada sobre webpack. Você precisa ter uma transformação que resolva o readFileSyncs nas strings reais do arquivo, como a transformação browserify faz.

Aqui está meu webpack.config funcional:

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;

Encerrando como resolvido.

Este é o exemplo mais direto e simples de configuração do webpack com PIXI que encontrei.

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

Eu recomendo atualizar o campo main de package.json para referenciar os arquivos construídos em bin . Esta é uma biblioteca que a maioria das pessoas usará no cliente. Parece um pouco estranho que ele não funcione com todas as ferramentas de construção populares fora da caixa.

Muitas (a maioria?) Outras bibliotecas populares do lado do cliente fazem referência aos arquivos construídos em package.json para evitar problemas como este.

Ele funciona com o browserify pronto para uso, bem como com o webpack com a configuração adequada. O próprio Webpack recomenda que você _não_ aponte para o arquivo construído, mas sim para a fonte e configure as transformações apropriadas.

Provavelmente no futuro tentaremos usar transformações mais "amigáveis ​​para webpack" ou incluir a configuração necessária em nosso pacote json para que você não precise escrevê-la (como fazemos para o browserify). Mas dizer que não funciona com construtores populares prontos para o uso não é verdade, o webpack é o único que você precisa de um pouco de configuração para começar a trabalhar.

@supermrji não funciona fora da caixa com o webpack.

Não consigo entender, como esse problema foi resolvido finalmente? Tenho o mesmo problema ao tentar usar sabão de dentro da aplicação de reação.

@aasten eu tenho o mesmo problema com sabonete e VUE-CLI ... você resolveu isso?

@ Crawler158 não, desculpe.

nada?

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

lucap86 picture lucap86  ·  3Comentários

st3v0 picture st3v0  ·  3Comentários

courtneyvigo picture courtneyvigo  ·  3Comentários

Darker picture Darker  ·  3Comentários

zcr1 picture zcr1  ·  3Comentários