SWCコンパイラとeslintでノードAPIを設定する方法

我々のAPIがより大きなコードベースを得るので、結果として、それが構築するのにかかる時間と熱い再ロードさえ長くなります.ところで、誰が今までに小さな変更をしたし、ホットリロードにAPIのほぼ3秒待つ必要がありましたか?あるいは、時間の短い量でいくつかの変更を行うし、実行中の問題を抱えている?
これは、SWCのようなコンパイラが、アプリケーションの開発中やコンパイル中やバンドルプロセス中であるかどうかを助けます.今日の記事では、typescriptのAPIを設定し、Sescと一緒に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"],
}

あなたが気づいたかもしれないように、我々はすでに我々の中でいくつかのものを定義しましたtsconfig.json 私は通常、私の記事では、パスエイリアスを作成し、“非常に現在の”バージョンのESを使用して定義していません.
TypesScriptのプロジェクトの設定で、必要な依存関係をインストールすることができます.このプロジェクトでは、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を設定するために必要な依存関係をインストールできます.

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 and watch-dev ) SWCがJavaScriptとNodemonホットにTypescriptコードを移すように同時に、APIは熱い変化を通知するとき、APIを再読み込みします.
SWC設定で、我々は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/

結論

私はあなたが今日の記事を楽しんで、何か新しいことを試しても、それはあなたにとって有用だったことを願っています.最後に出発here 同様の設定を持つリポジトリのリンク.拝見👋