From d84ed82dd1c35fb737ed8824f063dfe2469ba369 Mon Sep 17 00:00:00 2001 From: dvlprsh Date: Thu, 14 May 2020 08:22:48 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Intergrating=20with=20Build=20Tools=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EA=B2=80=ED=86=A0=20=EB=B0=8F=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=20(ref=20#54)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/Integrating with Build Tools.md | 73 ++++++++++++++++++++++++--- 1 file changed, 66 insertions(+), 7 deletions(-) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index 8bacc78c..25aaf026 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,43 @@ * [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 +105,7 @@ Duo(__dirname) .use(typescript()) .run(function (err, results) { if (err) throw err; - // 컴파일된 결과를 출력 파일에 작성합니다. + // 컴파일된 결과를 출력 파일에 작성합니다 fs.writeFileSync(out, results.code); }); ``` @@ -108,7 +146,7 @@ module.exports = function(grunt) { npm install gulp-typescript ``` -### Basic gulpfile.js +### 기본 gulpfile.js ```js var gulp = require("gulp"); @@ -146,7 +184,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 +234,12 @@ module.exports = { # MSBuild -프로젝트 파일을 업데이트하여 로컬에 설치된 `Microsoft.TypeScript.Default.props` (맨 위)와 `Microsoft.TypeScript.targets` (맨 아래) 파일을 포함하도록 하세요: +로컬에 설치된 `Microsoft.TypeScript.Default.props` (맨 위)와 `Microsoft.TypeScript.targets` (맨 아래) 파일을 포함하도록 프로젝트 파일을 업데이트하세요: ```xml - + @@ -195,14 +254,14 @@ module.exports = { false - + ``` -MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: [MSBuild 프로젝트의 컴파일러 옵션 설정](./Compiler Options in MSBuild.md) +MSBuild 컴파일러 옵션 정의에 대한 자세한 내용: [MSBuild 프로젝트의 컴파일러 옵션 설정](./Compiler%20Options%20in%20MSBuild.md) # NuGet From 0eeccbab1c123188f9f9bd70d956f6157695ffd1 Mon Sep 17 00:00:00 2001 From: dvlprsh Date: Thu, 14 May 2020 08:30:40 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EB=A7=88=EC=A7=80=EB=A7=89=EC=A4=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/Integrating with Build Tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index 25aaf026..405b5115 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -270,4 +270,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)을 참고하세요 From 79b6ec7531ce11c89b9c68359df7ec23d47a8ae6 Mon Sep 17 00:00:00 2001 From: dvlprsh Date: Sun, 17 May 2020 11:13:45 +0900 Subject: [PATCH 3/3] lint fix --- pages/Integrating with Build Tools.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index 405b5115..fedb6e70 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -25,7 +25,9 @@ npm install @babel/cli @babel/core @babel/preset-typescript --save-dev "presets": ["@babel/preset-typescript"] } ``` + ### 커맨드 라인 인터페이스 사용 + ```sh ./node_modules/.bin/babel --out-file bundle.js src/index.ts ``` @@ -42,6 +44,7 @@ npm install @babel/cli @babel/core @babel/preset-typescript --save-dev ``` ### 커맨드 라인 인터페이스 사용 + ```sh npm run build ```