close

TypeScript 널리 사용되는 개발 도구와 통합: Visual Studio Code, Webpack 및 Babel

TypeScript 에 확장 프로그램 설치 Visual Studio Code

TypeScript 에 확장 프로그램 설치 Visual Studio Code

Visual Studio Code 확장 창을 열고 탐색합니다.

" "를 검색 TypeScript 하고 공식 TypeScript 확장 프로그램을 설치합니다.

 

TypeScript tsconfig.json 파일에서 컴파일러 옵션 구성

TypeScript tsconfig.json 파일에서 컴파일러 옵션을 구성합니다 .

프로젝트의 필요에 따라 컴파일러 옵션을 사용자 정의하십시오.

예를 들어:

{  
  "compilerOptions": {  
    "target": "es6",  
    "module": "commonjs",  
    "strict": true  
  }  
}

 

IntelliSense, 자동 유형 검사 및 코드 탐색과 같은 기능을 Visual Studio Code

TypeScript 통합을 사용 하면 Visual Studio Code.

TypeScript 코드 탐색 및 리팩토링과 같은 의 고급 언어 기능도 편집기 내에서 사용할 수 있습니다.

 

TypeScript 와 통합 Webpack

필요한 패키지 설치: typescript, ts-loader 및 webpack

다음 명령을 실행하여 패키지를 설치합니다.

npm install typescript ts-loader webpack --save-dev

 

ts-loader를 사용하여 파일을 처리하도록 구성 webpack.config.js TypeScript

파일 에 다음 구성을 추가합니다. webpack.config.js 

module.exports = {  
  entry: './src/index.ts',  
  module: {  
    rules: [  
      {  
        test: /\.ts$/,  
        use: 'ts-loader',  
        exclude: /node_module/  
      }  
    ]  
  },  
  resolve: {  
    extensions: ['.ts', '.js']  
  },  
  output: {  
    filename: 'bundle.js',  
    path: path.resolve(__dirname, 'dist')  
  }  
};

 

TypeScript 컴파일 및 번들링 최적화를 위한 추가 플러그인 및 로더 설정

terser- webpack -plugin, clean- webpack -plugin 또는 babel -loader와 같은 다른 플러그인 및 로더를 포함하여 빌드 프로세스를 더욱 향상시킬 수 있습니다.

 

TypeScript 와 통합 Babel

필요한 패키지 설치: typescript, @ babel /preset- typescript 및 @ babel /cli

다음 명령을 실행하여 패키지를 설치합니다.

npm install typescript @babel/preset-typescript @babel/cli --save-dev

 

사전 설정 구성 또는 포함 .babelrc babel.config.js TypeScript

. babel rc 파일을 만들거나 .config.js 파일에 다음 구성을 추가합니다 babel.

module.exports = {  
  presets: ['@babel/preset-typescript']  
};

 

Babel 특정 TypeScript 기능 또는 호환성 요구 사항 에 맞게 구성 사용자 지정

추가 Babel 플러그인 또는 사전 설정을 포함하여 특정 기능을 활성화하거나 TypeScript 대상 환경과의 호환성을 보장할 수 있습니다.

 

팁 및 모범 사례

  • TypeScript 선택한 개발 도구에서 향상된 생산성 및 개발자 경험을 위해 관련 확장 및 플러그인을 설치합니다 .
  • TypeScript 의 증분 컴파일 기능( tsc --watch 또는)을 활용하여 webpack --watch 개발 중에 빌드 시간을 단축하십시오.
  • . TypeScript _

 

이 포괄적인 가이드를 따르면, 및 와 TypeScript 같은 널리 사용되는 개발 도구에 원활하게 통합할 수 있습니다. 이렇게 하면 개발 작업 흐름이 향상되고 고급 언어 기능이 제공되며 프로젝트에서 의 이점을 최대한 활용할 수 있습니다. Visual Studio Code Webpack Babel TypeScript