Дубликат № 1854?

Это похоже, но теперь проблема в том, зачем устанавливать
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'),
pixi по-прежнему работают.

но та же проблема Uncaught TypeError: fs.readFileSync is not a function

Я ничего не знаю о webpack. Вам нужно иметь преобразование, которое разрешает readFileSyncs в фактические строки файла, как это делает преобразование browserify.

Вот мой рабочий файл 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;

Закрытие, как решено.

Это самый прямой и простой пример настройки webpack с PIXI, который я нашел.

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

Я рекомендую обновить поле main в package.json для ссылки на созданные файлы в bin . Это библиотека, которую большинство людей собираются использовать на клиенте. Кажется немного странным, что он не будет взаимодействовать с любыми популярными инструментами сборки из коробки.

Многие (большинство?) Других популярных клиентских библиотек ссылаются на встроенные файлы в package.json для предотвращения подобных проблем.

Он работает как с браузером из коробки, так и с веб-пакетом с правильной конфигурацией. Сами Webpack рекомендуют вам _не_ указывать не на построенный файл, а вместо этого на источник и настраивать правильные преобразования.

Вероятно, в будущем мы постараемся использовать более «дружественные к webpack» преобразования или включить конфигурацию, необходимую в наш пакет json, чтобы вам не приходилось ее писать (как мы делаем для просмотра). Но сказать, что он не работает с популярными сборщиками из коробки, просто неправда, webpack - единственное, что вам нужно немного конфигурировать, чтобы начать работу.

@supermrji не работает из коробки с webpack.

Не можете понять, как этот вопрос был решен окончательно? Возникла такая же проблема при попытке использовать мыло из приложения реакции.

@aasten У меня такая же проблема с мылом и VUE-CLI ... вы ее решили?

@ Crawler158 , извини.

ничего такого?

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.