[express] webpack, typescript 기본 설정

홍정민·2024년 3월 12일

express typescript webpack

라이브러리

목록 보기

1/1

NodeJs로 webpack과 typescript를 최대한 기본으로 설정하고 express를 사용하여 동작하는 환경을 만들어 보자.

사실, 이러한 설정 환경은 공식문서를 보고 따라하면 되기 때문에 작성하지 않으려다가 여러 오류를 겪게 되어 기록해 놓는 것도 좋을 것 같아 작성을 하게 되었다.

Webpack

웹 애플리케이션에서 사용되는 다양한 자원(자바스크립트 파일, CSS, 이미지 등)을 하나의 파일로 번들링 해주는 역할을 한다. 이를 통해 웹 애플리케이션의 성능이 향상되는 효과를 기대할 수 있다.

폴더 생성

mkdir demo
cd demo
npm init -y

웹팩 설치

npm install webpack webpack-cli --save-dev

webpack.config.js 설정

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Warning1

TypeScript

자바스크립트에 "타입"이라는 개념이 추가된 언어이다. 정적 테스트를 통해 코드 작성 단계에서 오류를 잡아내어 런타임 오류를 줄인다.

Typescript 설치

npm install --save-dev typescript ts-loader

tsconfig.json 설정

※터미널 환경에 npx tsc --init 을 입력하면 tsconfig.json 파일이 생성된다.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

Error1

index.ts 파일 생성

실행

npx webpack

typescript용 express

typescript에서 exrpess를 사용하려면 express뿐만아니라 @types/express도 설치해줘야 한다.

npm install express @types/express --save-dev

index.ts에 express 코드를 작성하자

import express, { Express, Request, Response } from 'express';

const app: Express = express();
const port = 5000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello');
});

app.listen(port, () => {
  console.log(`<https://localhost>:${port}`);
});

Error2
Warning2

Error 및 Warning 해결

E1

index.ts 파일에서 import express from 'express'; 가 안되는 현상

A
tsconfig.json

{
  "compilerOptions": {
  	...,
    "esModuleInterop": true,
    ...
  }
}

E2

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
웹팩 v5버전 부터는 폴리필을 지원하지 않는다는 내용.

A
webpack.config.js

module.exports = {
  ...,
  target: 'node',
  ...
};

W1

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

A
webpack.config.js

module.exports = {
  ...,
  mode: 'development',
  ...
};

W2

WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/application.js 22:11-28
@ ./node_modules/express/lib/express.js 18:12-36
@ ./node_modules/express/index.js 11:0-41
@ ./src/index.ts 1:0-30 2:10-17

npm install webpack-node-externals --save-dev

webpack.config.js

const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...,
  externals: [nodeExternals()],
  ...
};

뒷북

나는 typescript로 API Server를 개발하려고 했다. ts파일을 컴파일하면 JS파일로 변환되는데 esModule을 사용했기 때문에 js파일을 실행하려고 하면 오류가 발생했다.

따라서 최신 문법을 사용할 수 있고 번들링도 해주는 웹팩도 같이 사용하여 TS로 Express를 개발하고 실행하는데 성공했다. 그러나 나는 nodemon이 개발에 많은 편의성을 주기 때문에 TS파일을 수정하면 웹팩으로 다시 번들링하고 번들링된 파일을 실행하는 과정을 생각하며 뭔가 이상하다는 것을 느꼈다. 이 과정을 스크립트로 만드는 것도 잘 되지 않았다.

나는 단지 ts와 nodemon을 사용하고 싶었던 것이다. 따라서 웹팩과 타입스크립트를 같이 도입했다. 그러나 ts-node랑 nodemon 같이 쓰거나 ts-node-dev 사용하면 되는 것이였다.

홍정민