Copy-Paste Templates

package.json (ESM Project)

Basic package.json configured for ES Modules in Node.js.

Key settings:

"type": "module" - Enables ESM for .js files
"engines" - Specifies Node.js version requirements

{
  "name": "my-esm-project",
  "version": "1.0.0",
  "type": "module",
  "description": "ES Modules project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "node --test"
  },
  "keywords": ["esm", "modules"],
  "author": "Your Name",
  "license": "MIT",
  "engines": {
    "node": ">=18.0.0"
  }
}

Learn more about Node.js ESM

tsconfig.json (TypeScript + ESM)

TypeScript configuration optimized for ES Modules.

Key settings:

"module": "ESNext" - Outputs ES modules
"moduleResolution": "bundler" - Modern resolution for bundlers
"esModuleInterop": true - Better CommonJS interop

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

vite.config.js

Vite configuration for fast ES Modules development.

import { defineConfig } from 'vite';

export default defineConfig({
  root: './src',
  publicDir: '../public',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
    sourcemap: true,
    rollupOptions: {
      input: {
        main: './src/index.html'
      }
    }
  },
  server: {
    port: 3000,
    open: true
  }
});

Learn more about Vite

.gitignore

Standard .gitignore for JavaScript projects.

# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Build outputs
dist/
build/
*.tsbuildinfo

# Environment variables
.env
.env.local
.env.*.local

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

# Testing
coverage/
.nyc_output/

# Cache
.cache/
.parcel-cache/
.eslintcache

.eslintrc.json (ESM)

ESLint configuration for ES Modules projects.

{
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

Import Map (Browser)

Import maps allow bare module specifiers in browsers.

Add this script tag to your HTML <head> before any module scripts.

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash-es",
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18",
    "three": "https://unpkg.com/[email protected]/build/three.module.js",
    "@/": "/src/",
    "@utils/": "/src/utils/"
  }
}
</script>

Learn more about Import Maps

index.html (ESM Template)

Basic HTML template for ES Modules in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES Modules App</title>
</head>
<body>
  <div id="app"></div>

  <!-- Load your ES Module -->
  <script type="module" src="./main.js"></script>
</body>
</html>

main.js example:

// main.js
import { greet } from './utils.js';

greet('World');
console.log('ESM app loaded!');

webpack.config.js

Webpack 5 configuration for ES Modules.

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  experiments: {
    outputModule: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Learn more about Webpack

jest.config.js (ESM Testing)

Jest configuration for testing ES Modules.

Note: Requires Node 18+ and experimental ESM support in Jest.

export default {
  testEnvironment: 'node',
  transform: {},
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  },
  testMatch: [
    '**/__tests__/**/*.js',
    '**/?(*.)+(spec|test).js'
  ],
  collectCoverageFrom: [
    'src/**/*.js',
    '!src/**/*.test.js'
  ]
};

Run tests with:

NODE_OPTIONS=--experimental-vm-modules npm test