与webpack的Paper.js
我正在使用react-starter-kit使用webpack的paper.js。
只是为了参考,我不得不安装json-loader和node-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版本。 它依赖于jsdom
和node-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" }