빌드 도구와의 통합

빌드 도구와의 통합 (Integrating with Build Tools)

TypeScript를 실제 프로젝트에 쓰려면 빌드 도구와 연결하는 일이 빠질 수 없어요. 이 문서는 Babel, Browserify, Grunt, Gulp, Rollup, Vite, Webpack 등 널리 쓰이는 빌드 도구들과 TypeScript를 연동하는 설정 방법을 한눈에 정리한 레퍼런스입니다. 도구별로 설치와 기본 설정 코드를 그대로 보여드릴 테니, 쓰고 있는 도구의 섹션만 골라 보면 돼요.

출처: TypeScript 핸드북

Babel

설치 (Install)

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

.babelrc

{
  "presets": ["@babel/preset-typescript"]
}

명령줄 인터페이스 사용

./node_modules/.bin/babel --out-file bundle.js src/index.ts

package.json

{
  "scripts": {
    "build": "babel --out-file bundle.js main.ts"
  },
}

명령줄에서 Babel 실행

npm run build

Browserify

설치 (Install)

npm install tsify

명령줄 인터페이스 사용

browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

API 사용

var browserify = require("browserify");
var tsify = require("tsify");

browserify()
  .add("main.ts")
  .plugin("tsify", { noImplicitAny: true })
  .bundle()
  .pipe(process.stdout);

자세한 내용: smrq/tsify

Grunt

`grunt-ts` 사용 (더 이상 유지보수되지 않음)

설치

npm install grunt-ts --save-dev

기본 Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    ts: {
      default: {
        src: ["**/*.ts", "!node_modules/**/*.ts"],
      },
    },
  });
  grunt.loadNpmTasks("grunt-ts");
  grunt.registerTask("default", ["ts"]);
};

자세한 내용: TypeStrong/grunt-ts

`grunt-browserify`와 `tsify` 조합 사용

설치

npm install grunt-browserify tsify --save-dev

기본 Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    browserify: {
      all: {
        src: "src/main.ts",
        dest: "dist/main.js",
        options: {
          plugin: ["tsify"],
        },
      },
    },
  });
  grunt.loadNpmTasks("grunt-browserify");
  grunt.registerTask("default", ["browserify"]);
};

자세한 내용: jmreidy/grunt-browserify, TypeStrong/tsify

Gulp

설치 (Install)

npm install gulp-typescript

기본 gulpfile.js

var gulp = require("gulp");
var ts = require("gulp-typescript");

gulp.task("default", function () {
  var tsResult = gulp.src("src/*.ts").pipe(
    ts({
      noImplicitAny: true,
      out: "output.js",
    })
  );
  return tsResult.js.pipe(gulp.dest("built/local"));
});

자세한 내용: ivogabe/gulp-typescript

Jspm

설치 (Install)

npm install -g jspm@beta

참고: 현재 jspm의 TypeScript 지원은 0.16beta 단계입니다.

자세한 내용: TypeScriptSamples/jspm

MSBuild

로컬로 설치한 Microsoft.TypeScript.Default.props(맨 위)와 Microsoft.TypeScript.targets(맨 아래) 파일이 포함되도록 프로젝트 파일을 수정합니다:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- Include default props at the top -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

  <!-- TypeScript configurations go here -->
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>

  <!-- Include default targets at the bottom -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: MSBuild 프로젝트에서 컴파일러 옵션 설정

NuGet

우클릭 -> Manage NuGet Packages
Microsoft.TypeScript.MSBuild 검색
Install 클릭
설치가 끝나면 다시 빌드하세요!

더 자세한 내용은 Package Manager Dialog와 NuGet으로 nightly 빌드 사용하기에서 찾을 수 있어요.

Rollup

설치 (Install)

npm install @rollup/plugin-typescript --save-dev

typescript와 tslib 둘 다 이 플러그인의 peer dependency이므로 별도로 설치해야 한다는 점을 기억하세요.

사용법 (Usage)

rollup.config.js 설정 파일을 만들고 플러그인을 import 합니다:

// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

Svelte 컴파일러

설치 (Install)

npm install --save-dev svelte-preprocess

typescript는 이 플러그인의 선택적 peer dependency이므로 별도로 설치해야 합니다. tslib도 제공되지 않아요.

CLI 타입 체킹을 위해 svelte-check도 고려해 볼 만합니다.

사용법 (Usage)

svelte.config.js 설정 파일을 만들고 플러그인을 import 합니다:

// svelte.config.js
import preprocess from 'svelte-preprocess';

const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess()
};

export default config;

이제 script 블록이 TypeScript로 작성되었다고 지정할 수 있습니다:

<script lang="ts">

Vite

Vite는 .ts 파일 import를 기본 지원합니다. 다만 트랜스파일만 수행할 뿐 타입 체킹은 하지 않아요. 또한 일부 compilerOptions 값이 특정 값이어야 한다는 요구도 있습니다. 자세한 내용은 Vite 문서를 참고하세요.

Webpack

설치 (Install)

npm install ts-loader --save-dev

Webpack 5 또는 4 사용 시 기본 webpack.config.js

const path = require('path');

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

ts-loader에 대한 더 자세한 내용은 여기를 참고하세요.

대안:

awesome-typescript-loader

빌드 도구와의 통합