Node.js新项目配置ES2022（顶级await）遇阻求助

一、现有express-generator-typescript项目配置调整 #

顶级await仅支持ES模块（ESM）环境，需同时调整TypeScript编译配置和Node.js模块模式：

1. 修改tsconfig.json #

确保核心编译配置指向ES2022和ESM格式：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. 修改package.json #

声明项目为ESM模块，并调整dev脚本适配ts-node的ESM模式：

{
  "type": "module",
  "scripts": {
    "dev": "ts-node-esm src/server.ts"
  }
}

3. 修正导入语句 #

ES模块要求导入文件必须带完整扩展名，比如：

• 错误：import { router } from './routes'
• 正确：import { router } from './routes.ts'

4. 验证顶级await #

在src/server.ts等顶级文件中直接使用await：

import express from 'express';

// 顶级await示例：模拟异步初始化
const initConfig = async () => {
  return new Promise(resolve => setTimeout(() => resolve({ port: 3000 }), 500));
};
const config = await initConfig();

const app = express();
app.listen(config.port, () => {
  console.log(`Server running on port ${config.port}`);
});

二、创建支持ES2022的Express项目的其他方案 #

方案1：手动搭建ESM版Express+TypeScript #

1. 初始化项目：

mkdir express-esm && cd express-esm
yarn init -y

2. 安装依赖：

yarn add express
yarn add -D typescript @types/express ts-node-esm @types/node nodemon

3. 生成并调整tsconfig：

npx tsc --init --target ES2022 --module ESNext --moduleResolution NodeNext --outDir dist --rootDir src

4. 配置package.json脚本：

{
  "type": "module",
  "scripts": {
    "dev": "nodemon --exec ts-node-esm src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

方案2：用Vite快速搭建 #

Vite原生支持ESM和顶级await，配置更简洁：

1. 初始化项目：

yarn create vite@latest express-vite --template vanilla-ts
cd express-vite
yarn add express
yarn add -D @types/express

2. 修改vite.config.ts启用SSR模式：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    middlewareMode: 'ssr'
  }
});

3. 编写src/server.ts：

import express from 'express';
import { createServer as createViteServer } from 'vite';

// 顶级await启动Vite开发服务
const viteServer = await createViteServer({
  server: { middlewareMode: 'ssr' }
});

const app = express();
app.use(viteServer.middlewares);

app.get('/', (req, res) => {
  res.send('Vite + Express with top-level await!');
});

app.listen(3000);

内容的提问来源于stack exchange，提问作者Hex