我正在尝试使用 react-starter-kit 将 paper.js 与 webpack 结合使用.
仅供引用,我必须安装 json-loader 和 node-loader,我还必须将 Node 添加到 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
这是我的 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'
}
};
虽然在 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
此外,我在浏览器控制台中收到错误消息:
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 生态系统还很陌生,所以我可能做错了什么。
最佳答案
构建在 npm 上的 PaperJS 是 paper-node
,它是 PaperJS 的 NodeJS 版本。它依赖于 jsdom
和 node-canvas
,它们在浏览器中不起作用。
恐怕你需要使用 bower 来检索客户端版本的 PaperJS,或者链接到 https://github.com/paperjs/paper.js
获取 paper
在你的 package.json 中的依赖。
"dependencies": {
"paper": "paperjs/paper.js"
}
然后通过 require('paper/dist/paper-full')
请求 PaperJS。
正如@bebraw 指出的那样,您可以通过提供标签来选择特定版本的 PaperJS。查看Releases页。由于当前版本是 0.9.22,最后一个片段将变成:
"dependencies": {
"paper": "paperjs/paper.js#v0.9.22"
}
关于javascript - 带有 webpack 的 Paper.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30576192/