Typescript Visual Studio 2015 업데이트 3 별도의 ts 파일을 가져 오는 모듈 시스템

Question

Visual Studio에서 기본 app.ts 파일에 선언 된 여러 클래스가있는 Typescript 프로젝트를 만들었습니다. 이제이 클래스들을 분리 된 .ts 파일로 분리하기 시작하겠습니다. 이 프로젝트 유형에 권장되는 모듈 로딩 시스템을 이해하는 데 어려움이 있습니다. 내가 asyc 구문을 사용할 수 있도록 내가 ES6을 선택한

은/기다리고 :

나는 새로운 Test.ts가 보낸 테스트 유형 선언으로 파일을 추가 한 :

내 app.ts 나는이 형식의 인스턴스를 만드는거야 다시

export class Test { 

} 

window.onload = async() => { 
    let test = new Test(); 
} 

Visual Studio에서 그것을 가져 오기를 추가 제공 :

import {Test} from "Test"; 

을 지금, 나는 다음과 같은 콘솔 메시지가 내가 크롬에서 솔루션을 실행할 때 :

Uncaught SyntaxError: Unexpected token import 

내가 크롬 실현 "가져 오기"를 인식하지 못합니다. 누군가가이 VS 2015 환경에서 가져 오기를 어떻게 얻을 수 있는지 제안 할 수 있습니까? 다른 모듈 시스템을 가져 가야합니까? 그렇다면 별도의 .ts 파일로드 지원을 어떻게 추가합니까?

편집 :이 구문을 사용하여 내가 본 예 :

/// <reference path="Test.ts" /> 

만이 할 작동하지 않습니다 컴파일은 시간이 유형을 해결하고 내가 그 사용되지 않는 방법입니다 수집합니다. (? ES5) 내가 크롬에서 소스 탭에서 보면

또한, 나는 내 소스에서 transpilation가 생각하는 것을 볼 수 있습니다

window.onload =() => __awaiter(this, void 0, void 0, function*() { 

그러나 나는 또한 "클래스"키워드를 참조하는 나는 예상하지 못했기 때문에 어떤 변형이 일어나고 있는지 정확히 알지 못한다. 즉 비동기은, (지원) 클래스 (하지 transpiled 및 지원), 수입 __awaiter하는

편집 은 내가 project

을 이어 webpack.config.js 사용 (변형되지 않고 지원되지 않음.) :

를

module.exports = { 
    entry: './src/app.ts', 
    output: { 
     filename: './dist/bundle.js' 
    }, 
    resolve: { 
     // Add `.ts` and `.tsx` as a resolvable extension. 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     loaders: [ 
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
      { test: /\.tsx?$/, loader: 'ts-loader' } 
     ] 
    } 
} 

하지만 import 문은 그대로 복사하여 브라우저가 이해하는 로더에 ES5 출력에 변형되지 같은 문제를 갖고있는 것 같다 :

을 올바른 궤도에 저를 착용하는 브루노에3210

import {Test} from "./Test"; 

Answer 1

감사합니다. 분리 된 .ts 파일을 단일 ES5 js 파일로 변환 할 수있게 된 이유는 babel-loader를 추가하는 것이 었습니다.

npm install babel-loader 

그리고 내 tsconfig.js 파일에 로더 참조 추가 :

이

module.exports = { 
    entry: './src/app.ts', 
    output: { 
     filename: './dist/bundle.js' 
    }, 
    resolve: { 
     // Add `.ts` and `.tsx` as a resolvable extension. 
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
    }, 
    module: { 
     loaders: [ 
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 
      { test: /\.tsx?$/, loader: 'ts-loader' }, 
      { test: /\.js$/, loader: "babel-loader"} 
     ] 
    } 
} 

이제, TS 파일의 import 문이에 transpiled 있습니다을 node_modules로를 설치하여 먼저

바벨 로더 구문