解決

プロジェクトにオーバーライドセクションを追加します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"
    }
  }
}

インサイト

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ステートメントを変更し、次のコードになります。

jspm_packages/npm/[email protected]/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;
...

バンドルを作成しようとすると、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。