Pixi.js: 与webpack的兼容性

创建于 2015-05-28 · 16评论 · 资料来源: pixijs/pixi.js

var PIXI = require('pixi.js');

第一次尝试给了我很多webpack错误：

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

所以我将json-loader添加到webpack的配置中。

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

成功。如果这开箱即用，那就太好了。

🤔 Question

资料来源

fusepilot

最有用的评论

Webpack可以选择加载“预打包”的库而不进行解析（例如pixi.js），只需在webpack config的模块部分添加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

我不确定您将如何使该Webpack兼容，关于Webpack的有关运行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尝试了两种方式。不过，仅当我使用热模块重装时，这种情况才会发生，在生产环境中它可以正常工作。

我最终使用了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

RanzQ 于 2015-10-31

我想您可能需要某种webpack插件才能支持.json需要加载？节点/浏览器本机支持它。

englercj 于 2015-10-31

@englercj配置json-loader时受支持。我不是webpack的专家，但这可能是webpack-hot-middleware引起的一些问题，由于捆绑软件有效，因此错误仅出现在dev模式下。

RanzQ 于 2015-10-31

嗯，很奇怪。是的，对不起，我也不熟悉：/

englercj 于 2015-10-31

Webpack可以选择加载“预打包”的库而不进行解析（例如pixi.js），只需在webpack config的模块部分添加noParse即可，如下所示：

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

此代码段必须解决内部需求问题。

Nazariglez 于 2015-11-12

👍5 🎉3 😄2

这是我发现的使用PIXI配置webpack的最直接，最简单的示例。

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: 与webpack的兼容性

最有用的评论

所有16条评论

相关问题