Systemjs 번들 글로벌 가져 오기 구성

Question

저는 Typescript, ES6 모듈 구문 및 SystemJS/builder를 사용하고 있습니다.

내가 할 노력하고있어 기본적인 요구 사항

은 다음과 같습니다

• 이 @types 패키지를 사용하여 타이프 라이터 코드 완성을 사용 ES6 모듈 가져 오기 구문을 사용
• (글로벌 NPM뿐만 아니라 설치에 대한) (예를 들어 import * as _ from 'lodash'를)
• 빌더가 빌드에서 전역을 제외하고 dev/production의 CDN URL을 사용하여 제대로 가져 왔는지 확인하십시오.

내가 빌드 및 DEV/생산 ENV에 사용하고있어 설정 만 얻을 그것을 위로가는 : 여기에서

System.config({ 
    meta: { 
    "lodash": { 
     "format": "global", 
     "build": false, 
     "exports": "_" 
    } 
    // ...more meta 
    }, 
    map: { 
    "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js", 
    // ...more maps 
    } 
}); 

내가 ES6에 transpiles NPM 작업을 한 후 모든 번들 바벨 플러그인을 통해 하나의 파일로 스크립트는 프로덕션 페이지에 직접로드되어로드됩니다. 문제는 내가 같은 오류가 계속 글로벌 의존 수입 한 번 인해

{default: _ } //_ is the actual lodash export

같은 객체와 CDN 수입을 포장 systemjs에 등 "_.clone는 함수가 아닙니다"나는 변화에 성공했습니다 수입은 import _ from 'lodash' 입니다. 그러나 lodash (또는 angle과 같은 다른 전역 스크립트)가 기본값을 내 보내지 않아 코드 완성을 잃어 버리기 때문에 IDE 오류가 발생합니다.

여기서 systemjs/builder의 요구 사항을 충족시키는 올바른 방법은 무엇입니까?

부수적으로 나는 더 잘 작동한다면 systemjs CDN import 대신 스크립트 태그를 사용하는 것이 좋습니다.

Answer 1

TypeScript에는이 시나리오의 경우 플래그 --allowSyntheticDefaultImports이 있습니다. 구체적으로 말하자면, 다른 단계의 변환기, 로더 또는 번들러가 나중에 module.exports에서 exports.default까지의 맵을 제공한다는 것을 유형 검사기에 알립니다.

당신은 tsconfig.json에서 컴파일러 옵션 아래에서 모듈 형식이 "system"로 설정되어있는 경우,이 플래그가 암시 적으로 설정되어 있는지

{ 
    "compilerOptions": { 
    "target": "esnext", 
    "module": "es2015", 
    "allowSyntheticDefaultImports": true, 
    "moduleResolution": "node", 
    "baseUrl": "." 
    } 

참고이 플래그를 지정할 수 있습니다.

이제

import _ from "lodash"; 

를 작성할 수와 타이프 라이터는 이해를 유형 체킹하고 올바르게 사용되었는지 확인합니다. 그러나 이것은 typechecking에만 영향을줍니다. 런타임 합성을 제공하는 로더 또는 중간 변환기가 여전히 필요합니다 (이 경우 이미 있음).

import * as _ from "lodash"; 

제안 NodeJS을 위반 -. 당신이 _([1, 2]).map(x => x ** 2)에로 호출하는 경우> ESM의 상호 운용성 제안하고 또한 당신의 장점을 잘하고있다, 그래서에서 호출되는 모듈의 네임 스페이스 개체를 금지 배아 줄기 사양을 위반 --allowSyntheticDefaultImports 플래그와 SystemJS가 제공하는 interop.