![[TS] TypeScript Playground 만들기
by Jbee](https://image.slidesharecdn.com/ts00typescriptplayground-180728041109/85/intro-typescript-playground-1-320.jpg)
![webpack.config.js
module.exports = {
entry: './src/index.ts',
output: {
filename: './dist/bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /.ts?$/,
loader: 'awesome-typescript-loader',
include: path.resolve(__dirname, 'src')
}
]
},
plugins: [
new CheckerPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
};](https://image.slidesharecdn.com/ts00typescriptplayground-180728041109/85/intro-typescript-playground-10-320.jpg)
intro. typescript playground
- 1. [TS] TypeScript Playground 만들기 by Jbee
- 2. 최소한의npm과 설정으로TypeScript playground 만들기를진행해보겠습 니다. 사실가장빠른playground 세팅은이저장소를clone하면됩니다!ㅎㅎ https://github.com/JaeYeopHan/typescript_playground
- 3. 우선적으로 TypeScript 님부터모셔오도록합시다:) $ npm install -g typescript
- 4. 프로젝트세팅 디렉토리를하나만들고 npm init 을통해 package.json 설정을해줍니 다. "start": "webpack-dev-server --open" $ mkdir typescript_playground && cd typescript_playground $ npm init # set configuration of npm
- 5. transpiler를태울webpack이필요한데그 config파일과 TypeScript 설정 파일인 tsconfig.json 파일을생성해줍니다. $ touch webpack.config.js tsconfig.json $ touch index.html $ mkdir src $ touch src/index.ts
- 6. 다음은개인취향에따른optional한세팅파일들입니다. # And create optional files... $ touch .editorconfig $ touch .gitignore $ touch README.md 이파일들의내용은repo를참고하세요!
- 7. 이젠필요한npm 모듈들을설치합니다. $ npm install webpack webpack-dev-server --save-dev $ npm install awesome-typescript-loader --save-dev 프론트엔드개발자의영원한친구 we1bpack 과 그 친구 webpack-dev- server 를설치해줍니다. 그리고 공식문서에는 ts-loader 를사용하던데 요, 저희는가볍게 무시하고 awesome-typescript-loader 를설치해줍니 다. 딱이만큼만설치하면됩니다. ES6를한번사용해보려고 babel 이며 babel-core 며 .babelrc 파일이며온갖 이상한npm파일과 설정파일을 생성한기억이한번쯤은있으실텐데요, 타입스크립트는여기까지가 끝입니다. (행복합니다.)
- 9. webpack.config.js const webpack = require('webpack'); const path = require("path"); const { CheckerPlugin } = require('awesome-typescript-loader'
- 10. webpack.config.js module.exports = { entry: './src/index.ts', output: { filename: './dist/bundle.js' }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, devtool: 'inline-source-map', module: { loaders: [ { test: /.ts?$/, loader: 'awesome-typescript-loader', include: path.resolve(__dirname, 'src') } ] }, plugins: [ new CheckerPlugin(), new webpack.HotModuleReplacementPlugin(), ], };
- 11. 이문서에서는webpack tutorial을다루지않습니다. webpack tutorial은여 기에서따라하실수있습니다. (깨알홍보!) HotMoudleReplacementPlugin 이녀석은도저히포기할수없어서추가 했습니다. 이제본격적으로typescript 설정들어갑니다. https://github.com/JaeYeopHan/webpack2_tutorial
- 12. tsconfig.json { "compilerOptions": { "noImplicitAny": true, "removeComments": true }, "awesomeTypescriptLoaderOptions": { /* ... */ } }
- 13. ES6를처음시작하던때의 .babelrc 파일이기억나시나요? 그것과 비슷하 다고 볼수있는데요, 상당히간단합니다. 거의모든부분을 awesome- typescript-loader 에서cover하고 있고 입맛에맞게 customize할수있 도록 "awesomeTypescriptLoaderOptions" 라는이름으로인터페이스가 열려있습니다.
- 14. index.html javascript로transpile될typescript파일을브라우저개발자도구에서확인 하기 위해서 index.html 파일을간단히작성해줍니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> Hello, TypeScript world!! <script src="/dist/bundle.js"></script> </body> </html>
- 16. console.log(`hello typescript world`); 그리고 start! $ npm start
- 17. 브라우저가 자동으로실행될텐데요, 개발자도구를열어보면hello typescript world라는console이찍혀있을겁니다. 이제TypeScript로해볼 수있는것을이것 저것 해보면됩니다.
- 18. 감사합니다. Reference GitHub of awesome‑typescript‑loader GitHub of tslint‑loader Jbee's Webpack tutorial TypeScript Official Document GitHub of jest