Paper.js 使用 webpack

Question

我正在尝试通过 react-starter-kit 将 paper.js 与 webpack 结合使用。

仅供参考，我必须安装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

这就是我的 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 生态系统还很陌生，所以我可能做错了什么。

Answer 1

基于 npm 构建的 PaperJS 是 paper-node，这是 PaperJS 的 NodeJS 版本。这取决于 jsdom 和 node-canvas，它们在浏览器中不起作用。

恐怕您需要使用 bower 来检索客户端版本的 PaperJS，或者 link 到 https://github.com/paperjs/paper.js 用于 [=27= 中的 paper 依赖项].

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

然后通过 require('paper/dist/paper-full').

需要 PaperJS

正如@bebraw 指出的那样，您可以通过提供标签 select 特定版本的 PaperJS。请参阅 Releases 页面。由于当前版本为 0.9.22，因此最后一个片段将变为：

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

Paper.js 使用 webpack

Paper.js with webpack

javascript

node.js

paperjs

webpack