如何使用 fabric.js v2 创建 jspm 包

Question

我正在尝试使用包含 fabric.js 版本 2 的 JSPM 创建一个 javascript 包。唉，执行 jspm 包失败了。

$ jspm bundle src/main --minify --inject
       Building the bundle tree for src/main...

err  Error on fetch for @empty/lib/jsdom/living/generated/utils.js at file:///Users/dkoerner/projects/JSPMFabricTestCase/@empty/lib/jsdom/living/generated/utils.js
    Loading npm:fabric@2.0.0-rc.4/dist/fabric.js
    Loading npm:fabric@2.0.0-rc.4.js
    Loading src/bootstrap.js
    Loading src/main.js
    Error: ENOENT: no such file or directory, open '/Users/dkoerner/projects/JSPMFabricTestCase/@empty/lib/jsdom/living/generated/utils.js'

我已经按照 jspm 和 fabric 示例创建了一个测试项目 (https://github.com/dkoerner85/JSPMFabricTestCase)，并验证了捆绑包创建适用于当前的 fabric 稳定版本 v1.7.22。然而，将版本提升到候选发布版本 v2.0.0-rc4 会破坏捆绑。

我对 javascript 应用程序开发还很陌生，因此不明白失败的原因以及如何修复它。非常感谢任何指点或解释。

npm: v5.5.1 节点：v8.9.3

Answer 1

解决方案

将覆盖部分添加到项目的 package.json:

"overrides": {
  "npm:fabric@2.0.0-rc.4": {
    "map": {
      "canvas": "@empty",
      "fs": "@empty",
      "jsdom/lib/jsdom/living/generated/utils": "@empty",
      "jsdom/lib/jsdom/utils": "@empty",
      "jsdom": "@empty",
      "http": "@empty",
      "https": "@empty",
      "xmldom": "@empty",
      "url": "@empty"
    }
  }
}

洞察力[=42=]

在阅读了 jspm 和 systemJS 之后，我找到了解决这个问题的方法。关键代码在 fabric 包的 fabric.js 和 package.json 文件中。

dist/fabric.js

...
fabric.document = require('jsdom').jsdom(decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),{ features: {FetchExternalResources: ['img']}});
fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper;
fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas;
fabric.window = fabric.document.defaultView;
DOMParser = require('xmldom').DOMParser;
...

package.json

...
"browser" : {
   "canvas": false,
   "fs":      false,
   "jsdom":   false,
   "jsdom/lib/jsdom/living/generated/utils": false,
   "jsdom/lib/jsdom/utils": false,
   "http":   false,
   "https":   false,
   "xmldom":  false,
   "url": false
},
...

现在，当用jspm install npm:fabric@2.0.0-rc.4安装包时，jspm会修改require语句，导致如下代码：

jspm_packages/npm/fabric@2.0.0-rc.4/dist/fabric.js

...
fabric.document = require('@empty').jsdom(decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), {features: {FetchExternalResources: ['img']}});
fabric.jsdomImplForWrapper = require('@empty/lib/jsdom/living/generated/utils').implForWrapper;
fabric.nodeCanvas = require('@empty/lib/jsdom/utils').Canvas;
fabric.window = fabric.document.defaultView;
DOMParser = require('@empty').DOMParser;
...

当试图创建一个 bundle 时，jspm 会被 '@empty/lib/jsdom/living/generated/utils' require 语句绊倒。

Error: ENOENT: no such file or directory, open '/Users/dkoerner/projects/JSPMFabricTestCase/@empty/lib/jsdom/living/generated/utils.js'

jspm 按照 package.json 的要求首先处理 jsdom 条目，因此无法识别更详细的条目 'jsdom/lib/jsdom/living/generated/utils'。必须以正确的顺序提供地图 - 长路径在短路径之前。

这可以通过上面解决方案中描述的本地覆盖来实现。请注意 jsdom 在覆盖中排在 @empty/lib/jsdom/living/generated/utils 下方，而不是原来的 package.json.

如何使用 fabric.js v2 创建 jspm 包

How to create jspm bundle with fabric.js v2

javascript

fabricjs

jspm

解决方案