[英]Paper.js with webpack
I'm trying to use paper.js with webpack using react-starter-kit . 我正尝试使用react-starter-kit将paper.js与webpack一起使用。
Just for the reference, I had to install json-loader and node-loader , also I had to add node to webpack config, to get rid of the build errors like this 仅供参考,我不得不安装json-loader和node-loader ,我也必须添加节点到webpack配置,以摆脱像这样的构建错误
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
This is what my webpack.config.js looks like 这就是我的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'
}
};
I still get some warning during the gulp build though: 虽然在gulp构建过程中仍然会收到一些警告:
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
Also I get an error in the browser console: 我也在浏览器控制台中收到错误:
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
Any ideas? 有任何想法吗? I am fairly new to the whole webpack/node ecosystem, so I might be doing something wrong. 我对整个webpack / node生态系统都很陌生,所以我可能做错了。
The PaperJS build on npm is paper-node
, which is the NodeJS version of PaperJS. 在npm上构建的PaperJS是paper-node
,它是PaperJS的NodeJS版本。 It depends on jsdom
and node-canvas
which won't work in the browser. 它取决于jsdom
和node-canvas
,它们在浏览器中不起作用。
I'm afraid you'll need to use bower to retrieve the client version of PaperJS, or link to https://github.com/paperjs/paper.js
for the paper
dependency in your package.json. 我担心您需要使用bower来检索PaperJS的客户端版本,或者链接到https://github.com/paperjs/paper.js
以获取package.json中的paper
依赖关系。
"dependencies": {
"paper": "paperjs/paper.js"
}
Then require PaperJS via require('paper/dist/paper-full')
. 然后通过require('paper/dist/paper-full')
要求PaperJS。
As @bebraw points out, you can select a specific version of PaperJS by providing a tag. 正如@bebraw指出的那样,您可以通过提供标签来选择特定版本的PaperJS。 See the Releases page. 请参阅版本页面。 Since the current version is 0.9.22, the last snippet would become: 由于当前版本为0.9.22,最后一个片段将变为:
"dependencies": {
"paper": "paperjs/paper.js#v0.9.22"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.