ホームページ > ウェブフロントエンド > jsチュートリアル > Rollup、Jest、Nodemon を使用した完全な Node.js TypeScript セットアップ

Rollup、Jest、Nodemon を使用した完全な Node.js TypeScript セットアップ

DDD
リリース: 2025-01-25 22:31:11
オリジナル
927 人が閲覧しました

A Complete Node.js   TypeScript Setup with Rollup, Jest, and Nodemon

最新の JavaScript 開発では、Node.js を TypeScript とともに使用することで、そのタイプ セーフとスケーラビリティのための強化されたツールを活用することで恩恵を受けることがよくあります。 これは、堅牢なバンドラー、テスト フレームワーク、自動リロードを統合することによってさらに強化されます。 この記事では、効率的な開発エクスペリエンスを実現するために、TypeScript、Rollup、Jest、Nodemon を使用して Node.js プロジェクトをセットアップする方法を説明します。

Node.js TypeScript セットアップの簡素化

TypeScript を使用した Node.js プロジェクトの構成は、複数のツールと構成が関係し、複雑になる場合があります。 これにより、多くの場合、煩雑なワークフローが発生します。 この記事では、最新のツールを使用した簡素化されたアプローチを紹介し、一般的なセットアップの課題に対処します。

  • TypeScript: タイプ セーフティを提供します。
  • ロールアップ (esbuild を使用): 高速で効率的なバンドラー。
  • 冗談: 包括的なテスト フレームワーク。
  • Nodemon: 開発中のアプリケーションの自動リロードを有効にします。
  • 簡素化されたインポート: import ステートメントで .js 拡張子を指定する必要がなくなります。

この構成により開発プロセスが合理化され、より効率的で保守しやすくなります。

はじめに: 前提条件

始める前に、次のものが揃っていることを確認してください。

  • Node.js がインストールされました。
  • TypeScript と Node.js の基礎的な理解

プロジェクトのセットアップ: ステップバイステップガイド

TypeScript を使用して基本的な Node.js プロジェクトを作成しましょう:

  1. プロジェクト ディレクトリ: 新しいプロジェクト ディレクトリを作成し、そこに移動します:

    <code class="language-bash">mkdir my-ts-app
    cd my-ts-app</code>
    ログイン後にコピー
  2. パッケージの初期化: package.json ファイルの初期化:

    <code class="language-bash">npm init -y</code>
    ログイン後にコピー
  3. 依存関係のインストール: 必要な依存関係をインストールします:

    <code class="language-bash">npm install --save-dev typescript ts-node @types/node tslib ts-jest rollup rollup-plugin-esbuild nodemon jest @rollup/plugin-node-resolve @rollup/plugin-commonjs</code>
    ログイン後にコピー
  4. TypeScript 構成 (tsconfig.json): Node.js 環境用に TypeScript を構成します:

    <code class="language-json">{
      "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "strict": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "declaration": true,
        "sourceMap": true
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "dist", "tests"]
    }</code>
    ログイン後にコピー
  5. ロールアップ構成 (rollup.config.js): 実稼働ビルドのロールアップを構成します:

    <code class="language-javascript">import resolve from '@rollup/plugin-node-resolve';
    import commonjs from '@rollup/plugin-commonjs';
    import esbuild from 'rollup-plugin-esbuild';
    
    export default {
      input: './src/index.ts',
      output: {
        dir: 'dist',
        format: 'esm',
        sourcemap: true,
        banner: '#!/usr/bin/env node'
      },
      plugins: [
        resolve(),
        commonjs(),
        esbuild({ target: 'esnext', sourceMap: true, minify: true })
      ]
    };</code>
    ログイン後にコピー
  6. Jest 構成 (jest.config.js): テスト用に Jest を構成します:

    <code class="language-javascript">/** @type {import('ts-jest').JestConfigWithTsJest} **/
    export default {
      testEnvironment: "node",
      transform: {
        "^.+.tsx?$": ["ts-jest",{}]
      }
    };</code>
    ログイン後にコピー
  7. ノード構成 (nodemon.json): 自動リロード用にノードモンを構成します:

    <code class="language-json">{
      "watch": ["src"],
      "ext": "ts,json",
      "ignore": ["src/**/*.spec.ts"],
      "exec": "npm start"
    }</code>
    ログイン後にコピー
  8. ソース ファイルの作成: src/index.tssrc/functions/addition.ts を作成します (元のプロンプトで提供されるサンプル ファイル)。

  9. テスト ファイルの作成: テスト ファイル (例: tests/functions/addition.spec.ts) を作成します。

  10. プロジェクトの構造: プロジェクトは、元のプロンプトで説明されているものと同様の構造を持つ必要があります。

アプリケーションの実行

  1. ビルド: npm run build
  2. 実行: npm start
  3. 開発 (自動リロードあり): npm run dev
  4. テスト: npm test

結論

このセットアップは、TypeScript を使用して Node.js アプリケーションを開発するための合理化された効率的な環境を提供します。 特定のプロジェクトのニーズに合わせて構成を調整してください。 これは、堅牢でスケーラブルなアプリケーションを構築するための基盤です。

以上がRollup、Jest、Nodemon を使用した完全な Node.js TypeScript セットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート