웹 팩 으로 typescript 컴 파일 하기

typescript 로 개발 하 는 것 은 매우 편리 하지만, 최종 적 으로 javascript 로 컴 파일 해 야 운행 할 수 있어 서, 이것 은 약간 구불구불 하 다.webpack 을 사용 하고 플러그 인 을 좀 더 설정 하면 많은 일 을 절약 할 수 있 습 니 다.

우선, 전역 설치 typescript:

npm install -g typescript

그리고 프로젝트 디 렉 터 리 를 새로 만 듭 니 다.

mkdir demo

cd demo 

demo 디 렉 터 리 에서 프로젝트 초기 화:

npm init -y

생 성 tsconfig.json 프로필, 생 성 된 파일 은 프로젝트 의 루트 디 렉 터 리 에 있 습 니 다:

tsc --init

설정 파일 을 편집 하고 다음 설정 항목 을 수정 합 니 다.

ECMAScript 대상 버 전 지정

"target": "es5"

어떤 모듈 시스템 코드 를 생 성 할 지 지정 합 니 다

"module": "es6"

컴 파일 과정 에서 도입 해 야 할 라 이브 러 리 파일 의 목록

프로젝트 수요 에 따라 도 입 된 라 이브 러 리 파일 이 다 를 수 있 습 니 다.

"lib": ["es2015", "dom"]

자 바스 크 립 트 파일 컴 파일 허용

"allowJs": true

모듈 분석 전략 설정

"moduleResolution": "node"

편집 이 끝 난 후에 다시 설치 tsconfig.json 와 webpack 합 니 다. 이 두 라 이브 러 리 는 로 컬 설 치 를 권장 합 니 다. 전체 설 치 를 하지 마 십시오.

npm install --save-dev webpack webpack-cli

webpack-cli 자신 만 이해 하기 때문에 webpack 파일 을 처리 해 야 합 니 다. 우 리 는 JavaScript 라 이브 러 리 를 설치 하고 로 컬 에 설치 해 야 합 니 다 .ts:

npm install --save-dev typescript ts-loader

상기 동작 을 완성 한 후 프로젝트 루트 디 렉 터 리 에 파일 을 만 들 고 편집 하 며 설정 속성 을 설정 합 니 다.

const path = require('path');

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

파일 을 편집 하고 실행 ts-loader 스 크 립 트 를 추가 해 야 합 니 다.

...
"scripts": {
  "build": "webpack"
},
...

이로써 우 리 는 명령 행 창 에서 typescript 프로젝트 의 파일 을 컴 파일 하고 포장 할 수 있 습 니 다.

npm run build

보충: webpack.config.js 라 이브 러 리 대신 package.json 라 이브 러 리 를 설치 할 수도 있 습 니 다. 두 가지 기능 은 같 지만 webpack 파일 컴 파일 webpack 보다 속도 가 빠르다 고 합 니 다.

설치 awesome-typescript-loader 라 이브 러 리

npm install --save-dev awesome-typescript-loader

ts-loader 파일 에 설정 awesome-typescript-loader:

const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
  entry: './src/demo_02.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'awesome-typescript-loader',
      exclude: /node_modules/
    }]
  },
  plugins: [
    new CheckerPlugin()
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
};