如何使用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"
    }
  }
}

洞察力

閱讀有關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 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;
...

嘗試創建捆綁包時，jspm會偶然遇到'@empty/lib/jsdom/living/generated/utils'語句。

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' 。 必須以正確的順序提供地圖-長路徑先於短路徑。

如上面的解決方案所示，可以使用局部替代來實現。 請注意，與原始package.json相對， jsdom在@empty/lib/jsdom/living/generated/utils位於優先級中。