esbuild로 Node API를 구축하는 방법

Node에서 API를 구축할 때 가장 흥미로운 점 중 하나는 사용하거나 실험할 도구를 선택할 수 있다는 사실입니다. 그리고 우리가 선택할 수 있는 것 중 하나는 컴파일러입니다. 이 기사의 경우 개발 프로세스 중에 코드를 TypeScript에서 JavaScript로 빠르게 트랜스파일하는 데 관심이 있을 것입니다. 프로덕션 환경에서 사용할 빠른 빌드를 원하는 것과 같습니다.

솔직히 저는 SWC의 열렬한 팬이지만 esbuild를 사용하여 매우 빠르고 간단한 방법으로 프로젝트를 구성하는 데 도움이 되는 의존성이 있다는 것을 전혀 몰랐습니다. 눈 깜짝할 사이에 babel에서 esbuild로 마이그레이션할 수 있을 정도로 쉽습니다.

프로젝트 설정

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

mkdir ts-esbuild
cd ts-esbuild

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

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

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

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

이제 TypeScript 환경이 구성되었으므로 이제 빌드 및 개발 프로세스(라이브 재로딩 포함)에 대해 esbuild를 사용하는 데 필요한 종속성을 설치할 수 있습니다.

npm install -D nodemon esbuild esbuild-node-tsc

이러한 종속성을 설치하면 구성할 수 있습니다nodemon.json.

{
  "watch": ["src"],
  "ignore": ["src/**/*.test.ts", "node_modules"],
  "ext": "ts,mjs,js,json,graphql",
  "exec": "etsc && node ./dist/server.js",
  "legacyWatch": true
}

이제 package.json에서 ESM을 사용할 것임을 지정하고 다음 스크립트를 추가할 것입니다.

{
  // ...
  "main": "server.js",
  "scripts": {
    "dev": "nodemon",
    "build": "etsc",
    "start": "node dist/server.js"
  },
  // ...
}

nodemon은 소스 코드의 변경 사항을 볼 때마다 변경 사항이 있는 즉시 폴더를 빌드한 다음 api를 다시 로드합니다. 그러나 실행되는 코드는 TypeScript가 아니라 dist 폴더에 저장될 JavaScript 코드입니다.

마지막으로 간단한 API를 만들 수 있습니다.

// @/src/server.ts
import fastify, {
  FastifyRequest,
  FastifyReply,
  FastifyInstance,
} from "fastify";

const startServer = async (): Promise<FastifyInstance> => {
  const app = fastify();

  app.get("/", async (request: FastifyRequest, reply: FastifyReply): Promise<FastifyReply> => {
    return reply.send({ hello: "world" });
  });

  return app;
};

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

esbuild와 함께 TypeScript를 사용하여 Node에서 API를 생성하는 것은 문자 그대로 간단합니다. 한 가지 언급하고 싶은 것은 esbuild-node-tsc는 tsconfig.json 구성을 고려하지만 빌드는 esbuild로 수행됩니다.

이 모든 것을 구성하지 않고 사용해 보고 싶다면(많지는 않았지만) 저장소를 복제할 수 있습니다this. 좋은 하루 되세요 👊