Modern JavaScript development often benefits from using Node.js with TypeScript, leveraging its type safety and enhanced tooling for scalability. This is further amplified by integrating a robust bundler, testing framework, and automatic reloading. This article guides you through setting up a Node.js project with TypeScript, Rollup, Jest, and Nodemon for a streamlined development experience.

Simplifying the Node.js TypeScript Setup

Configuring a Node.js project with TypeScript can be complex, involving multiple tools and configurations. This often leads to a cumbersome workflow. This article presents a simplified approach using the latest tools, addressing common setup challenges:

• TypeScript: Provides type safety.
• Rollup (with esbuild): A fast and efficient bundler.
• Jest: A comprehensive testing framework.
• Nodemon: Enables automatic application reloading during development.
• Simplified Imports: Eliminates the need to specify .js extensions in import statements.

This configuration streamlines the development process, making it more efficient and maintainable.

Getting Started: Prerequisites

Before you begin, ensure you have:

• Node.js installed.
• A foundational understanding of TypeScript and Node.js.

Project Setup: A Step-by-Step Guide

Let's create a basic Node.js project with TypeScript:

1. Project Directory: Create a new project directory and navigate to it:

   mkdir my-ts-app
   cd my-ts-app

2. Package Initialization: Initialize a package.json file:

   npm init -y

3. Dependency Installation: Install the required dependencies:

   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

4. TypeScript Configuration (tsconfig.json): Configure TypeScript for the Node.js environment:

   {
     "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"]
   }

5. Rollup Configuration (rollup.config.js): Configure Rollup for production builds:

   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 })
     ]
   };

6. Jest Configuration (jest.config.js): Configure Jest for testing:

   /** @type {import('ts-jest').JestConfigWithTsJest} **/
   export default {
     testEnvironment: "node",
     transform: {
       "^.+.tsx?$": ["ts-jest",{}]
     }
   };

7. Nodemon Configuration (nodemon.json): Configure Nodemon for automatic reloading:

   {
     "watch": ["src"],
     "ext": "ts,json",
     "ignore": ["src/**/*.spec.ts"],
     "exec": "npm start"
   }

8. Create Source Files: Create src/index.ts and src/functions/addition.ts (example files provided in original prompt).

9. Create Test Files: Create test files (e.g., tests/functions/addition.spec.ts).

10. Project Structure: Your project should have a structure similar to the one outlined in the original prompt.

Running the Application

1. Build: npm run build
2. Run: npm start
3. Develop (with auto-reload): npm run dev
4. Test: npm test

Conclusion

This setup provides a streamlined and efficient environment for developing Node.js applications with TypeScript. Remember to adjust the configurations to fit your specific project needs. This is a foundation for building robust and scalable applications.

The above is the detailed content of A Complete Node.js TypeScript Setup with Rollup, Jest, and Nodemon. For more information, please follow other related articles on the PHP Chinese website!