Pixi.js: Совместимость с webpack

Созданный на 28 мая 2015  ·  16Комментарии  ·  Источник: pixijs/pixi.js

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'
  }]
}

Успех. Было бы неплохо, если бы это сработало из коробки.

🤔 Question

Самый полезный комментарий

В Webpack есть возможность загружать «предварительно упакованные» библиотеки без их анализа (например, pixi.js), просто добавьте noParse в раздел вашего модуля в конфигурации webpack, что-то вроде этого:

module: { noParse: [ /.*(pixi\.js).*/ ], }

Этот фрагмент должен решить проблему с внутренними требованиями.

Все 16 Комментарий

Мы используем 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, который я нашел.

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

Это самый простой конфиг 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

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

Была ли эта страница полезной?
0 / 5 - 0 рейтинги