SWC 컴파일러 및 ESLint로 노드 API를 설정하는 방법

API가 더 큰 코드 기반을 갖게 됨에 따라 결과적으로 빌드 및 핫 리로드에 걸리는 시간이 더 길어질 것입니다. 그런데 누가 작은 변경을 한 다음 API가 핫 리로드될 때까지 거의 3초를 기다려야 했습니까? 또는 짧은 시간에 여러 가지를 변경한 다음 프로세스 실행에 문제가 있습니까?

애플리케이션 개발 중이든 컴파일 및 번들링 프로세스 중이든 SWC와 같은 컴파일러가 도움이 되는 곳입니다. 오늘의 기사에서는 TypeScript에서 API를 설정한 다음 ESLint와 함께 SWC 구성을 진행합니다.

응용 프로그램을 개발하는 동안 우리는 SWC가 TypeScript 소스 코드에 대한 변경 사항을 감시하기를 원할 것입니다. 변경 사항이 있는 즉시 변경 사항을 적용한 동일한 파일에서 JavaScript로 변환됩니다. 마지막으로 nodemon을 사용하여 트랜스파일된 코드에서 발생하는 변경 사항을 확인하고 변경 사항이 있는 즉시 API를 핫 리로드합니다.

API를 생산에 투입해야 할 때 일반 프로세스를 수행하고 빌드 명령을 실행한 다음 시작 명령을 실행해야 합니다.

프로젝트 설정

먼저 프로젝트 폴더를 만드는 일반적인 작업부터 시작하겠습니다.

mkdir swc-config
cd swc-config

다음으로 TypeScript 프로젝트를 초기화하고 필요한 종속성을 추가합니다.

npm init -y
npm install -D typescript @types/node

다음으로 tsconfig.json 파일을 만들고 다음 구성을 추가합니다.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "allowJs": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "es2020"
    ],
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "paths": {
      "@routes/*": [
        "./src/routes/*"
      ],
      "@middlewares/*": [
        "./src/middlewares/*"
      ]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules"],
}

아시다시피 경로 별칭 생성 및 ES의 "최신"버전 사용과 같이 일반적으로 내 기사에서 정의하지 않는 몇 가지 사항을 우리tsconfig.json에 이미 정의했습니다.

TypeScript에서 프로젝트 구성을 통해 이제 필요한 종속성을 설치할 수 있습니다. 이 프로젝트에서는 Koa 프레임워크를 사용하지만 이 설정은 Express, Fastify 등과 같은 다른 많은 프레임워크에서도 작동합니다.

# dependencies
npm install koa @koa/router koa-body

# dev dependencies
npm install -D @types/koa @types/koa__router

이제 이러한 기본 종속성을 사용하여 항목 파일로 시작하는 간단한 API를 만들 수 있습니다.

// @/src/main.ts
import Koa from 'koa'
import koaBody from 'koa-body'

import router from '@routes/index'

const startServer = async (): Promise<Koa> => {
  const app = new Koa()

  app.use(koaBody())
  app.use(router.routes())

  return app
}

startServer()
  .then((app) => app.listen(3333))
  .catch(console.error)

그런 다음 경로를 만들 수 있습니다.

// @/src/routes/index.ts
import KoaRouter from '@koa/router'
import { Context } from 'koa'

import { logger } from '@middlewares/index'

const router = new KoaRouter()

router.get('/', logger, (ctx: Context): void => {
  ctx.body = { message: 'Hello World' }
})

export default router

간단한 미들웨어:

// @/src/routes/index.ts
import { Context, Next } from 'koa'

export const logger = async (ctx: Context, next: Next): Promise<Next> => {
  const start = Date.now()
  const ms = Date.now() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms} ms`)
  return await next()
}

이제 다음 단계인 SWC 구성으로 넘어갈 수 있습니다.

SWC 설정

이제 SWC를 구성하는 데 필요한 종속성을 설치할 수 있습니다.

npm install -D @swc/cli @swc/core chokidar nodemon concurrently

다음으로 .swcrc 파일을 만들고 다음 구성을 추가해 보겠습니다.

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true
    },
    "target": "es2020",
    "paths": {
      "@routes/*": ["./src/routes/*"],
      "@middlewares/*": ["./src/middlewares/*"]
    },
    "baseUrl": "."
  },
  "module": {
    "type": "commonjs"
  }
}

이제 package.json에 필요한 스크립트를 추가해 보겠습니다.

{
  // ...
  "scripts": {
    "dev": "concurrently \"npm run watch-compile\" \"npm run watch-dev\"",
    "watch-compile": "swc src -w --out-dir dist",
    "watch-dev": "nodemon --watch \"dist/**/*\" -e js ./dist/main.js",
    "build": "swc src -d dist",
    "start": "NODE_ENV=production node dist/main.js",
    "clean": "rm -rf dist"
  },
  // ...
}

watch-compile 스크립트에서 swc는 chokidar를 사용하여 코드를 자동으로 변환합니다. watch-dev 스크립트는 nodemon을 사용하여 애플리케이션을 핫 리로드합니다. dev 스크립트가 실행되면 두 명령( watch-compile 및 watch-dev )을 동시에 실행하여 swc가 TypeScript 코드를 JavaScript로 변환하고 nodemon이 변경 사항을 감지하면 API를 핫 리로드합니다.

SWC가 구성되면 ESLint 구성으로 이동할 수 있습니다.

ESLint 설정

먼저 ESLint를 개발 종속성으로 설치합니다.

npm install -D eslint

그런 다음 다음 명령을 실행하여 eslint 구성을 초기화합니다.

npx eslint --init

그런 다음 터미널에서 다음을 선택하십시오.



이제 package.json로 돌아가서 다음 스크립트를 추가할 수 있습니다.

{
  // ...
  "scripts": {
    // ...
    "lint": "eslint --ext .ts src",
    "lint:fix": "eslint --ext .ts src --fix"
  },
  // ...
}

마지막으로 .eslintignore 파일을 만들고 다음을 추가합니다.

dist/

결론

오늘의 기사가 즐거웠고 새로운 것을 시도하더라도 도움이 되었기를 바랍니다. 마지막으로 구성은 비슷하지만 Express를 사용하는 저장소 링크here를 남깁니다. 만나요👋