Pixi.js: 웹팩과의 호환성

에 만든 2015년 05월 28일 · 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...

그래서 나는 webpack의 설정에서 node: { fs: "empty" } 를 설정했고 위의 오류를 제거했습니다.

하지만이 오류 :

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

그래서 webpack의 설정에 json-loader 를 추가했습니다.

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

성공. 그래도 이것이 상자에서 작동한다면 좋을 것입니다.

🤔 Question

출처

fusepilot

가장 유용한 댓글

Webpack에는 구문 분석하지 않고 "사전 포장 된"라이브러리 (예 : pixi.js)를로드 할 수있는 옵션이 있습니다. 다음과 같이 webpack 구성에서 모듈 섹션에 noParse를 추가하면됩니다.

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

이 스 니펫은 내부 요구 사항 문제를 해결해야합니다.

Nazariglez 에 2015년 11월 12일

👍5 🎉3 😄2

모든 16 댓글

browserify brfs 변환을 사용합니다.

https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57 -L61

어떻게 그 웹팩을 호환 가능하게 만들지 모르겠습니다. browserify 변환을 실행하는 웹팩에 대한 기사가 있습니까?

englercj 에 2015년 05월 28일

https://github.com/webpack/transform-loader

drkibitz 에 2015년 05월 29일

@drkibitz @englercj 힌트를 주셔서 감사합니다. transform-loader + json-loader를 사용하여 Pixi + Webpack을 시작할 수있었습니다.

@fusepilot 여기에 내가 사용중인 webpack 구성이 있습니다.

mking 에 2015년 06월 06일

Babel을 사용할 때 @mking 구성이 작동하도록 할 수 없습니다. brfs를 postLoaders로 옮겨야했지만 이제 작동합니다 : https://gist.github.com/oal/898df82fa64e54dd16d0

oal 에 2015년 07월 04일

이것이 대답 한 것 같기 때문에 닫힙니다.

englercj 에 2015년 08월 02일

pixi.js/src/core/const.js ../../package.json 를 요구하고 Cannot find module "../../package.json" 오류가 발생하는 문제를 해결할 수 없습니다. @oal에 의해 두 가지 방법 으로 시도했습니다. 이것은 핫 모듈 재로드를 사용할 때만 발생하지만 프로덕션 빌드에서는 제대로 작동합니다.

나는 import PIXI from 'pixi.js/bin/pixi.js' 와 같은 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

RanzQ 에 2015년 10월 31일

.json을 지원하려면 웹 팩용 플러그인이 필요할 수 있습니다. Node / browserify는 기본적으로 지원합니다.

englercj 에 2015년 10월 31일

@englercj json-loader 구성시 지원됩니다. 나는 webpack의 전문가는 아니지만 번들이 작동하기 때문에 webpack-hot-middleware로 인한 문제 일 수 있습니다. 오류는 dev 모드에서만 나타납니다.

RanzQ 에 2015년 10월 31일

흠, 이상합니다. 그래 미안 나도 익숙하지 않다 : /

englercj 에 2015년 10월 31일

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

이 스 니펫은 내부 요구 사항 문제를 해결해야합니다.

Nazariglez 에 2015년 11월 12일

👍5 🎉3 😄2

이것은 내가 찾은 PIXI로 웹팩을 구성하는 가장 직접적이고 간단한 예입니다.

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

davydka 에 2016년 01월 08일

이 요지는 가장 간단한 webpack + pixi.js 구성입니다.

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

(좋은 의견과 함께)

FlorianBELLAZOUZ 에 2016년 03월 21일

👍3

위에 링크 된 요점은 pixijs / pixi와 관련된 버그로 고통받습니다. js @ 5a53e38 -pixi의 버전 번호가 __VERSION__ 로보고됩니다.

webpack.config.js 에는 다음 로더가 포함되어야합니다.

{
  include: path.resolve(__dirname, 'node_modules/pixi.js'),
  loader: 'transform/cacheable?browserify-versionify'
}

요점 댓글은 분명히 알림을 보내지 않기 때문에 @mjackson이 여기에 언급했습니다 😞

cltatman 에 2016년 05월 08일

❤1

이 문제가 발생했습니다. 솔루션에 감사드립니다!

czanella 에 2016년 07월 18일

다음은 Webpack / Typescript 및 PixiJS에 대한 작업 구성입니다. :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

Nek- 에 2017년 09월 25일

👍1

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를여십시오.

lock[bot] 에 2019년 02월 24일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Pixi.js: 웹팩과의 호환성

가장 유용한 댓글

모든 16 댓글

관련 문제