Pixi.js: حزمة الويب - خطأ في النوع لم يتم اكتشافه: fs.readFileSync ليس دالة

تم إنشاؤها على ٢ سبتمبر ٢٠١٥ · 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()

لكن إذا استخدمت رابط cdn https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js"
كل شيء على ما يرام .

هل هناك حاجة إلى تعيين أي خيار لـ Wepack؟

مصدر

supermrji

👍9

التعليق الأكثر فائدة

لا أستطيع أن أفهم ، كيف تم حل هذه المشكلة في النهاية؟ واجهت نفس المشكلة عند محاولة استخدام الصابون من داخل تطبيق رد الفعل.

aasten في ٣٠ نوفمبر ٢٠١٧

👍2

ال 14 كومينتر

تكرار # 1854؟

englercj في ٢ سبتمبر ٢٠١٥

إنه مشابه ، لكن المشكلة الآن هي سبب ضبطه
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'),
بيكسي لا يزال يعمل.

ولكن نفس المشكلة Uncaught TypeError: fs.readFileSync is not a function

supermrji في ٣ سبتمبر ٢٠١٥

لا أعرف أي شيء عن حزمة الويب. يجب أن يكون لديك تحويل يحل readFileSyncs إلى السلاسل الفعلية للملف مثل تحويل browserify.

englercj في ٣ سبتمبر ٢٠١٥

هنا هو 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;

ThomasDeutsch في ١٢ سبتمبر ٢٠١٥

👎9

إغلاق كما تم حلها.

englercj في ١٢ سبتمبر ٢٠١٥

👎17 😕8

هذا هو المثال الأكثر مباشرة وبساطة لتكوين حزمة الويب باستخدام PIXI الذي وجدته.

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

davydka في ٨ يناير ٢٠١٦

أوصي بتحديث الحقل main لـ package.json للإشارة إلى الملفات التي تم إنشاؤها في bin . هذه مكتبة سيستخدمها معظم الأشخاص على العميل. يبدو غريباً بعض الشيء أنه لن يتداخل مع أي وجميع أدوات البناء الشائعة خارج الصندوق.

تشير العديد من ملفات libs الشائعة الأخرى من جانب العميل (الأكثر؟) إلى الملفات المضمنة في package.json لمنع مشاكل مثل هذه.

jamesplease في ٢٨ مارس ٢٠١٦

👍1

إنه يعمل مع Browsify خارج الصندوق ، بالإضافة إلى حزمة الويب مع التكوين المناسب. يوصيك Webpack بأنفسهم _لا_ بالإشارة إلى الملف المدمج ، ولكن بدلاً من ذلك إلى المصدر وتكوين التحويلات المناسبة.

من المحتمل أن نحاول في المستقبل استخدام المزيد من تحويلات "webpack-friendly" ، أو تضمين التكوين الضروري في حزمة json الخاصة بنا حتى لا تضطر إلى كتابتها (مثلما نفعل مع browserify). لكن القول بأنه لا يعمل مع منشئي المحتوى المشهورين خارج الصندوق ليس صحيحًا على الإطلاق ، فإن webpack هو الوحيد الذي تحتاجه قليلاً من التكوين لبدء العمل.

englercj في ٢٨ مارس ٢٠١٦

👎3

supermrji لا يعمل خارج الصندوق مع حزمة الويب.