fabric.jsを使用してjspmバンドルを作成する方法

Question

fabric2jを含むJSPMでjavascriptバンドルを作成しようとしています。

$ 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とファブリックの例以下の試験プロジェクト（https://github.com/dkoerner85/JSPMFabricTestCase）を作成し、そのバンドルの作成が現在のファブリックの安定版リリースの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" 
    } 
    } 
} 

洞察

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:fabric@2.0.0-rc.4でパッケージをインストールする際に、JSPMは以下で、その結果、必要書類を変更しますコード：

jspm_pacバンドルを作成しようとすると'@empty/lib/jsdom/living/generated/utils'文を必要と上

... 
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はつまずきますkages/npm/fabric@2.0.0-rc.4/dist/fabric.js。

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

package.jsonによって必要とJSPMは、それによってよりdetailledエントリ'jsdom/lib/jsdom/living/generated/utils'を認識することができない、最初jsdomエントリを処理しました。短い経路の前に長い経路 - 正しい順序で地図を提供する必要があります。

これは、上記の解決方法で説明したローカルオーバーライドで実現できます。 jsdomは、元のpackage.jsonではなく、オーバーライドで@empty/lib/jsdom/living/generated/utils以下になります。