Pixi.js: Webpack - TypeError Tidak Tertangkap: fs.readFileSync bukan fungsi

Dibuat pada 2 Sep 2015 · 14Komentar · Sumber: 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/
},

Ini menunjukkan Uncaught TypeError: fs.readFileSync is not a function

Jika saya menghapus

node: {
    fs: "empty"
}

It goes Uncaught Error: Cannot find module "fs"

di skrip utama saya main.js

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

Saya menemukannya saat menggunakan new PIXI.filters.BlurFilter()

tetapi jika saya menggunakan tautan cdn https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js"
Tidak apa-apa.

Apakah ada opsi untuk Wepack yang perlu diatur?

Sumber

supermrji

👍9

Komentar yang paling membantu

Tidak mengerti, bagaimana masalah ini akhirnya diselesaikan? Punya masalah yang sama ketika mencoba menggunakan sabun dari dalam aplikasi reaksi.

aasten pada 30 Nov 2017

👍2

Semua 14 komentar

Duplikat #1854?

englercj pada 2 Sep 2015

Ini mirip, tapi sekarang masalahnya adalah mengapa disetel
require('pixi.js')

node: {
    fs: "empty"
}

Semuanya berfungsi dengan baik, tetapi tidak suka #1854 , ini menunjukkan Uncaught TypeError: fs.readFileSync is not a function dalam beberapa fungsi seperti BlurFilter

Tambahan ,

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

Jika saya menghapus include: path.join(__dirname, 'node_modules', 'pixi.js'),
pixi masih berfungsi.

tapi masalah yang sama Uncaught TypeError: fs.readFileSync is not a function

supermrji pada 3 Sep 2015

Saya tidak tahu apa-apa tentang webpack. Anda harus memiliki transformasi yang menyelesaikan readFileSyncs menjadi string file yang sebenarnya seperti yang dilakukan oleh transformasi browserify.

englercj pada 3 Sep 2015

Ini webpack.config saya yang berfungsi:

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;

ThomasDeutsch pada 12 Sep 2015

👎9

Menutup sebagai terpecahkan.

englercj pada 12 Sep 2015

👎17 😕8

Ini adalah contoh paling langsung dan sederhana dalam mengonfigurasi webpack dengan PIXI yang saya temukan.

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

davydka pada 8 Jan 2016

Saya sarankan memperbarui bidang main dari package.json untuk referensi file yang dibangun di bin . Ini adalah perpustakaan yang kebanyakan orang akan gunakan pada klien. Tampaknya agak aneh bahwa itu tidak akan mengganggu dengan semua dan semua alat build populer di luar kotak.

Banyak (sebagian besar?) lib sisi klien populer lainnya merujuk file bawaan di package.json untuk mencegah masalah seperti ini.

jamesplease pada 28 Mar 2016

👍1

Ini bekerja dengan browserify di luar kotak, serta webpack dengan konfigurasi yang tepat. Webpack sendiri merekomendasikan agar Anda _jangan_ menunjuk ke file yang dibuat, tetapi ke sumber dan mengonfigurasi transformasi yang tepat.

Kemungkinan di masa mendatang kami akan mencoba menggunakan lebih banyak transformasi "ramah webpack", atau menyertakan konfigurasi yang diperlukan dalam paket json kami sehingga Anda tidak perlu menulisnya (seperti yang kami lakukan untuk browserify). Tetapi mengatakan itu tidak berfungsi dengan pembuat populer di luar kotak sama sekali tidak benar, webpack adalah satu-satunya yang Anda perlukan sedikit konfigurasi untuk mulai bekerja.

englercj pada 28 Mar 2016

👎3

@supermrji itu tidak bekerja di luar kotak dengan webpack.