Intergrating with Build Tools 전체 검토 및 번역 (ref #54)

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
 <?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <!-- 하단에 기본 props 포함 -->
+  <!-- 하단에 default props 포함 -->
   <Import
       Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
       Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
@@ -195,14 +257,14 @@ module.exports = {
     <TypeScriptSourceMap>false</TypeScriptSourceMap>
   </PropertyGroup>
 
-  <!-- 하단에 기본 대상 포함 -->
+  <!-- 하단에 default targets 포함 -->
   <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 프로젝트의 컴파일러 옵션 설정](./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)을 참고하세요