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

Question

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

$ 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:[email protected]/dist/fabric.js
    Loading npm:[email protected]
    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），并验证了bundle创建是否适用于当前的fabric稳定版本v1.7.22。然而，将版本升级到候选版本v2.0.0-rc4会破坏捆绑。

我对javascript应用程序开发相当新，因此不明白为什么会失败以及如何修复它。我很感激任何指示或解释。

npm：v5.5.1节点：v8.9.3

Answer 1

Solution

在项目的package.json中添加覆盖部分：

"overrides": {
  "npm:[email protected]": {
    "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"
    }
  }
}

Insight

在阅读了jspm和systemJS之后，我找到了解决这个问题的方法。关键代码位于结构包的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:[email protected]安装软件包时，jspm将修改require语句，从而生成以下代码：

就是屏幕_packages/年排名/[email protected]如此.4/第三天/fabric.就是

...
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首先按照jsdom的要求处理package.json条目，从而无法识别更详细的条目'jsdom/lib/jsdom/living/generated/utils'。有必要以正确的顺序提供地图 - 短路径之前的长路径。

这可以通过如上解决方案中描述的局部超控来实现。请注意，jsdom在覆盖下方的@empty/lib/jsdom/living/generated/utils下方订购，而不是原始的package.json。