본문 바로가기
컴퓨터/인터넷

Express with typescript and webpack

by 신규하 2018. 11. 13.

Express with typescript and webpack

기본 패키지 설정

package.json 파일을 만들어 줍니다.

npm init -y

express에 필요한 패키지를 설치해 줍니다.

yarn add express body-parser

Typescript 설정

typescript에 사용할 패키지를 설치 합니다.

yarn add --dev typescript ts-loader ts-node tslint @types/node @types/express

typescript에 필요한 내용을 설치 합니다. 그리고 tsconfig.json파일을 아래와 같이 입력 해 줍니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node"
  }, 
  "exclude": [
    "node_modules"
  ]
}

Webpack 설정

yarn add --dev webpack webpack-watch-server

webpack.config.js 파일을 아래와 같이 입력 합니다.

var path = require('path');

module.exports = {
  entry: './src/index.ts',
  target: 'node',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map',
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
};

Express 기본 제작

src/server.ts파일을 아래와 같이 작성 합니다.

import * as bodyParser from "body-parser";
import * as express from "express";
import { Request, Response } from "express";
import * as http from 'http';

var app:express.Application = express();

app.get('/', (req: Request, res: Response) => {
  res.status(200).json({status: "ok"});
});

let httpPort = 3000;
app.set("port", httpPort);
var httpServer = http.createServer(app);

//listen on provided ports
httpServer.listen(httpPort, (data) => {
  console.log(`Listening on port ${httpPort}`)
});

위 내용은 github에 올려져 있습니다.


댓글