fabric.js로 jspm 번들을 만드는 방법 v2

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 및 직물 예 다음 테스트 프로젝트 (https://github.com/dkoerner85/JSPMFabricTestCase)를 생성하고 해당 번들 생성은 현재 직물 안정적인 릴리스 v1.7.22와 함께 작동 확인했습니다. 릴리스 후보 v2.0.0-rc4로 버전을 높이면 번들 링이 중단됩니다.

저는 자바 스크립트 앱 개발에 상당히 익숙하며 이에 따라 왜 이것이 실패하고 어떻게 수리해야하는지에 대한 이유를 이해하지 못합니다. 나는 어떤 조언이나 설명에 감사한다.

NPM : v5.5.1 노드 : 니혼 전자 : JSPM에 대한 책을 읽은 후

"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" 
    } 
    } 
} 

인사이트

과 : v8.9.3

Answer 1

솔루션

프로젝트의 package.json에 재정의 섹션을 추가 systemJS,이 문제에 대한 해결책을 찾았습니다. 중요한 코드는 패브릭 패키지의 fabric.js 및 package.json 파일에 있습니다. jspm install npm:fabric@2.0.0-rc.4으로 패키지를 설치할 때

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는 다음의 결과로, 문을 필요로 수정합니다 코드 :

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' 

니혼 전자 : JSPM하여 더 자세한 것을 'jsdom/lib/jsdom/living/generated/utils' 항목을 인식하지 못한 먼저 package.json 필요한대로 jsdom 같이 처리 하였다. 짧은 경로 앞의 긴 경로 - 정확한 순서로지도를 제공해야합니다.

위의 솔루션에서 설명한대로 로컬 오버라이드를 통해이 작업을 수행 할 수 있습니다. jsdom은 원래 package.json이 아니라 오버라이드가 @empty/lib/jsdom/living/generated/utils 이하임을 나타냅니다.