diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index 8bacc78c..fedb6e70 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -1,5 +1,6 @@ 빌드 도구들 +* [Babel](#babel) * [Browserify](#browserify) * [Duo](#duo) * [Grunt](#grunt) @@ -9,6 +10,46 @@ * [MSBuild](#msbuild) * [NuGet](#nuget) +# Babel + +### 설치 + +```sh +npm install @babel/cli @babel/core @babel/preset-typescript --save-dev +``` + +### .babelrc + +```js +{ + "presets": ["@babel/preset-typescript"] +} +``` + +### 커맨드 라인 인터페이스 사용 + +```sh +./node_modules/.bin/babel --out-file bundle.js src/index.ts +``` + + +### package.json + +```js +{ + "scripts": { + "build": "babel --out-file bundle.js main.ts" + }, +} +``` + +### 커맨드 라인 인터페이스 사용 + +```sh +npm run build +``` + + # Browserify ### 설치 @@ -67,7 +108,7 @@ Duo(__dirname) .use(typescript()) .run(function (err, results) { if (err) throw err; - // 컴파일된 결과를 출력 파일에 작성합니다. + // 컴파일된 결과를 출력 파일에 작성합니다 fs.writeFileSync(out, results.code); }); ``` @@ -108,7 +149,7 @@ module.exports = function(grunt) { npm install gulp-typescript ``` -### Basic gulpfile.js +### 기본 gulpfile.js ```js var gulp = require("gulp"); @@ -146,7 +187,28 @@ _주의사항: 현재 jspm의 TypeScript 지원은 0.16beta 입니다._ npm install ts-loader --save-dev ``` -### 기본 webpack.config.js +### Webpack 2 사용 시 기본 webpack.config.js + +```js +module.exports = { + entry: "./src/index.tsx", + output: { + path: '/', + filename: "bundle.js" + }, + resolve: { + extensions: [".tsx", ".ts", ".js", ".json"] + }, + module: { + rules: [ + // '.ts' 또는 '.tsx' 확장자를 가진 모든 파일은 'ts-loader'에 의해 처리됩니다. + { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ } + ] + } +} +``` + +### Webpack 1 사용 시 기본 webpack.config.js ```js module.exports = { @@ -175,12 +237,12 @@ module.exports = { # MSBuild -프로젝트 파일을 업데이트하여 로컬에 설치된 `Microsoft.TypeScript.Default.props` (맨 위)와 `Microsoft.TypeScript.targets` (맨 아래) 파일을 포함하도록 하세요: +로컬에 설치된 `Microsoft.TypeScript.Default.props` (맨 위)와 `Microsoft.TypeScript.targets` (맨 아래) 파일을 포함하도록 프로젝트 파일을 업데이트하세요: ```xml - + @@ -195,14 +257,14 @@ module.exports = { false - + ``` -MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: [MSBuild 프로젝트의 컴파일러 옵션 설정](./Compiler Options in MSBuild.md) +MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: [MSBuild 프로젝트의 컴파일러 옵션 설정](./Compiler%20Options%20in%20MSBuild.md) # NuGet @@ -211,4 +273,4 @@ MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: [MSBuild 프로 * `Install` 클릭 * 설치가 완료되면 다시 빌드 하세요! -자세한 내용은 [패키지 매니저 다이얼로그](http://docs.nuget.org/Consume/Package-Manager-Dialog)와 [NuGet과 nightly builds 사용](https://github.com/Microsoft/TypeScript/wiki/Nightly-drops#using-nuget-with-msbuild) +자세한 내용은 [패키지 매니저 다이얼로그](http://docs.nuget.org/Consume/Package-Manager-Dialog)와 [NuGet과 nightly builds 사용](https://github.com/Microsoft/TypeScript/wiki/Nightly-drops#using-nuget-with-msbuild)을 참고하세요