commonjs / amd 모듈을 가져 오기위한 새로운 es6 구문, 즉 import foo = require ( 'foo')

commonjs / amd 모듈을 가져 오기위한 새로운 es6 구문, 즉`import foo = require ( 'foo')`

---

이전에는 다음과 같이 할 수있었습니다.

import foo = require('foo');

그러나 이제 TypeScript (1.5)가 es6 모듈 구문을 지원하므로 ES6 모듈 구문에서 동일한 것을 달성하는 올바른 방법은 무엇입니까?

---

올바른 방법은 이전 가져 오기 구문을 계속 사용하는 것입니다. 새 가져 오기 구문은 ES 모듈 전용이고 이전 가져 오기 구문은 ES6 이전 모듈 용입니다. 이 둘은 의도적으로 구별됩니다. 모듈 'foo'의 import * as foo from 'foo'모든 속성 을 가져 오지만 기본값을foo .

기능 디자이너로부터 :

• 내보내기 기본 선언은 항상 default라는 내 보낸 멤버를 선언하며 항상 exports.default에 대한 할당으로 내 보냅니다. 즉, export default일관되게 ES 모듈 의미를 가지고 있습니다. Babel과의 호환성을 __esModule위해 모듈에 기본 내보내기가있을 때 선택적으로 마커를 내보낼 수 있지만 실제로는 해당 마커를 아무것도 사용하지 않습니다.
• export =모듈 자체 대신 내보낼 다른 엔티티를 대체 하는 선언은 항상에 대한 할당으로 내 보냅니다 module.exports. .NET Framework를 사용하는 모듈에 다른 내보내기가있는 것은 오류 export =입니다. 이것은 기존 TypeScript 동작입니다.
• export =다른 모듈 (내부 또는 외부 모듈)을 내보내는 데 사용하는 모듈 은 새 ES6 구성을 사용하여 가져올 수 있습니다. 특히, 편리한 디스트 럭처링 임포트를 이러한 모듈과 함께 사용할 수 있습니다. export =다른 모듈을 내보내는 데 사용 하는 패턴은 내부 모듈 (예 : angular.d.ts)의 CommonJS / AMD보기를 제공하는 .d.ts 파일에서 일반적입니다.
• export =모듈 자체 대신 모듈이 아닌 엔티티를 내보내는 데 사용 하는 모듈 import x = require("foo")은 오늘날과 같이 기존 구문을 사용하여 가져와야합니다 .

---

2016 업데이트 : 어떤 시점에서 TypeScript 컴파일러 import * as foo from 'legacy-module-foo'가 특정 상황에서 레거시 모듈의 기본 가져 오기를 허용 하기 시작했습니다 . 이는 ES6 사양 위반입니다 ( §15.2.1.16 , "값"* "은 가져 오기 요청이 대상 모듈의 네임 스페이스 개체에 대한 것임을 나타냅니다 ." ).

이러한 방식으로 가져 오는 레거시 모듈이 ES6 모듈로 업데이트되면 해당 모듈에 대한 "기본"가져 * as foo오기가 작동을 중지 합니다 (가져 오기가 네임 스페이스 객체를 가져 오는 것으로 가정 되기 때문 ).이 작업을 수행하는지 모르는 경우 매우 혼란 스러울 수 있습니다. 이것은 TypeScript / SystemJS 해킹입니다. ES 사양에 대한 향후 TypeScript 재정렬로 인해 오류가 발생할 수도 있습니다.

따라서 ES6 네임 스페이스 가져 오기가 작동하는 방식에 대해 자신과 코드 작업을하는 다른 개발자를 혼동하는 것을 방지하고 주요 변경 사항을 혼동하지 않으려면 위에 설명 된 레거시 가져 오기 구문을 계속 사용하여 레거시 모듈을로드하는 것이 좋습니다.

---

ES6 모듈 구문에 해당하는 구문은 다음과 같습니다.

import * as foo from 'foo';

기본적으로 foo모듈의 모든 것을 이름으로 로컬 변수로 가져옵니다 foo.

---

ES6 모듈은 새로운 구문을 사용하여 효과적으로 TypeScript 외부 모듈입니다. ES6 모듈은 다른 모듈을 가져올 수 있고 외부에서 액세스 할 수있는 여러 내보내기를 제공하는 개별적으로로드 된 소스 파일입니다. ES6 모듈에는 몇 가지 새로운 내보내기 및 가져 오기 선언이 있습니다. 새로운 구문을 사용하도록 TypeScript 라이브러리 및 응용 프로그램을 업데이트하는 것이 좋지만 필수 사항은 아닙니다.

출처

내가 이해하는 한, 그것은 당신 자신의 TypeScript 모듈을 새로운 구문으로 마이그레이션하는 것이 권장되지만 import foo = require('foo')실제 AMD / CommonJS 모듈을 가져 오는 데 계속 사용하는 것을 의미 합니다.

---

현재 타이프 2.7 , 새로운이 esModuleInteropCommonJS / AMD / UMD와 기본 수입을 가능하게하는 데 사용할 수있는 플래그. true에서 해당 플래그를 설정하면 tsconfig.json예상대로 작동합니다.

import foo from 'foo';

---

또 다른 옵션은 commonjs 구문을 사용하여 가져 오는 것입니다.

const foo = require("foo");

TypeScript와 Bable은 모두이 작업을 수행하는 데 동의합니다. 또한 어쨌든 ES5 이하로 컴파일하는 경우 최종 형식과 너무 멀지 않습니다.

---

모든,

const foo = require("foo");

파일 인 경우 "foo"패키지에서 모든 인스턴스를 가져옵니다.

const foo = require("./foo");

호출하여 각 인스턴스에 액세스 할 수 있습니다. foo.InstanceName

특정 인스턴스를 가져 오려면

import MyInstance from "foo";

따라서 "foo"에서 특정 인스턴스 (Myinstance)를 가져 오므로 위의 방법을 사용하여 모두 가져올 수 있습니다.

import * as ReferenceName from "foo";

그에 상응하는

const ReferenceName = require("foo");

참조 URL : https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-ie-import-foo-require