var PIXI = require('pixi.js');
Первая попытка дала мне кучу ошибок веб-пакета:
ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/ascii
@ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22
ERROR in ./~/pixi.js/src/filters/blur/BlurXFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
@ ./~/pixi.js/src/filters/blur/BlurXFilter.js 3:9-22
ERROR in ./~/pixi.js/src/filters/blur/BlurYFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
@ ./~/pixi.js/src/filters/blur/BlurYFilter.js 3:9-22
etc...
Поэтому я установил node: { fs: "empty" }
в конфигурации webpack, и это избавило от вышеуказанных ошибок.
Но тогда эта ошибка:
ERROR in ./~/pixi.js/package.json
Module parse failed: /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "name": "pixi.js",
| "version": "3.0.6",
| "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
@ ./~/pixi.js/src/core/const.js 14:13-42
Поэтому я добавил json-loader в конфигурацию webpack.
module: {
loaders: [{
test: /\.json$/,
loader: 'json-loader'
}]
}
Успех. Было бы неплохо, если бы это сработало из коробки.
Мы используем browserify brfs
transform:
https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57 -L61
Я не уверен, как бы вы сделали этот веб-пакет совместимым, есть ли статьи о веб-паке, в котором выполняется преобразование браузера?
@drkibitz @englercj Спасибо за подсказку, я смог начать работу с Pixi + Webpack с помощью transform-loader + json-loader.
@fusepilot Вот конфигурация веб-пакета, которую я использую.
Я не мог заставить работать конфигурацию https://gist.github.com/oal/898df82fa64e54dd16d0
Закрытие, так как это кажется ответом.
Мне не удалось решить проблему, когда pixi.js/src/core/const.js
пытается потребовать ../../package.json
и выдает ошибку Cannot find module "../../package.json"
. Я пробовал оба способа @oal. Это происходит только тогда, когда я использую горячую перезагрузку модуля, хотя при производственной сборке он работает нормально.
В итоге я использовал встроенную версию pixi.js, например import PIXI from 'pixi.js/bin/pixi.js'
. И теперь я вижу предупреждение, но горячая перезагрузка работает:
[HMR] ./~/pixi.js/bin/pixi.js
Critical dependencies:
34:477-484 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/pixi.js/bin/pixi.js 34:477-484
Я думаю, вам может понадобиться какой-то плагин для webpack, чтобы он поддерживал .json, требуется загрузка? Node / browserify изначально поддерживает его.
@englercj Поддерживается, если настроено json-loader
. Я не эксперт с webpack, но это может быть проблема, вызванная webpack-hot-middleware , поскольку пакет работает, ошибка появляется только в режиме dev.
Хм, странно. Да, извините, я тоже не знаком с этим: /
В Webpack есть возможность загружать «предварительно упакованные» библиотеки без их анализа (например, pixi.js), просто добавьте noParse в раздел вашего модуля в конфигурации webpack, что-то вроде этого:
module: {
noParse: [
/.*(pixi\.js).*/
],
}
Этот фрагмент должен решить проблему с внутренними требованиями.
Это самый прямой и простой пример настройки webpack с PIXI, который я нашел.
Это самый простой конфиг webpack + pixi.js:
https://gist.github.com/mjackson/ecd3914ebee934f4daf4
(с отличными комментариями)
связанная выше суть страдает ошибкой, связанной с pixijs / pixi. js @ 5a53e38 - номер версии pixi __VERSION__
webpack.config.js
должен включать этот загрузчик:
{
include: path.resolve(__dirname, 'node_modules/pixi.js'),
loader: 'transform/cacheable?browserify-versionify'
}
@mjackson упоминает здесь, потому что комментарии по сути не отправляют уведомления 😞
Просто столкнулся с этой проблемой. Большое спасибо за решение!
Вот рабочая конфигурация для Webpack / Typescript и PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771
Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.
Самый полезный комментарий
В Webpack есть возможность загружать «предварительно упакованные» библиотеки без их анализа (например, pixi.js), просто добавьте noParse в раздел вашего модуля в конфигурации webpack, что-то вроде этого:
module: { noParse: [ /.*(pixi\.js).*/ ], }
Этот фрагмент должен решить проблему с внутренними требованиями.