与webpack的Paper.js

我正在使用react-starter-kit使用webpack的paper.js。

只是为了参考,我不得不安装json-loadernode-loader ,还必须添加节点到webpackconfiguration,以摆脱这样的构build错误

ERROR in ./~/paper/dist/paper-node.js Module not found: Error: Cannot resolve module 'fs' in /home/bojan/www/react/MyApp/node_modules/paper/dist @ ./~/paper/dist/paper-node.js 4808:3-16 10779:10-23 12253:10-23 

这是我的webpack.config.js看起来像

 var config = { ... resolve: { extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', '.node'] }, module: { loaders: [ { test: /\.json$/, loader: "json-loader" }, { test: /\.node$/, loader: "node-loader" }, ... ] }, node: { child_process: 'empty', console: 'empty', dgram: 'empty', dns: 'empty', fs: 'empty', net: 'empty', tls: 'empty' } }; 

尽pipe如此,我还是得到了一些警告:

 WARNING in ./~/paper/dist/paper-node.js require.extensions is not supported by webpack. Use a loader instead. WARNING in ./~/paper/dist/paper-node.js Critical dependencies: 12263:19-26 require function is used in a way in which dependencies cannot be statically extracted @ ./~/paper/dist/paper-node.js 12263:19-26 WARNING in ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js Critical dependencies: 1:503-510 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. @ ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/walk.js 1:503-510 WARNING in ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js Critical dependencies: 1:478-485 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. @ ./~/paper/~/jsdom/~/acorn-globals/~/acorn/dist/acorn.js 1:478-485 WARNING in ./~/paper/~/request/~/hawk/~/hoek/lib/index.js Critical dependencies: 403:34-60 the request of a dependency is an expression @ ./~/paper/~/request/~/hawk/~/hoek/lib/index.js 403:34-60 

另外,我在浏览器控制台中收到错误消息:

 Uncaught Error: Cannot open /home/bojan/www/react/MyApp/node_modules/paper/node_modules/canvas/build/Release/canvas.node: TypeError: process.dlopen is not a function (anonymous function) @ canvas.node:1 map../paper-core @ app.js:95332 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 (anonymous function) @ bindings.js:2 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 (anonymous function) @ canvas.js:12 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 (anonymous function) @ paper-node.js:10243 (anonymous function) @ paper-node.js:33 (anonymous function) @ paper-node.js:12290 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 (anonymous function) @ CbPaper.js:7 Object.defineProperty.value @ CbPaper.js:146 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 Object.defineProperty.value @ App.js:12 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 exports.TYPES.INTEGER @ app.js:5 __webpack_require__ @ bootstrap 62fa91d09bcc96ef0556:19 obj.__esModule.default @ bootstrap 62fa91d09bcc96ef0556:39 (anonymous function) @ bootstrap 62fa91d09bcc96ef0556:39 

有任何想法吗? 我对整个webpack / node生态系统相当陌生,所以我可能做错了什么。

PaperJS基于npm构build,是PaperJS的NodeJS版本。 它依赖于jsdomnode-canvas ,这在浏览器中不起作用。

恐怕您需要使用bower来检索PaperJS的客户端版本,或者链接到https://github.com/paperjs/paper.js以获取package.json中的paper依赖项。

 "dependencies": { "paper": "paperjs/paper.js" } 

然后通过require('paper/dist/paper-full')需要PaperJS。

正如@bebraw所指出的那样,您可以通过提供一个标签来select特定版本的PaperJS。 请参阅版本页面。 由于当前版本是0.9.22,最后一个片段将变成:

 "dependencies": { "paper": "paperjs/paper.js#v0.9.22" }