如何为Parcel指定多个ES模块输出路径？

云原生阿岚

2026-8-18

如何为Parcel配置多入口ES模块输出路径？

核心解决方案

通过在package.json的targets字段中明确配置ES模块输出规则，替代命令行入口指定，即可实现多入口、多路径的ES模块输出。以下是具体配置步骤：

1. 修改`package.json`配置

调整targets字段定义ES模块输出规则，同时简化构建脚本：

{
  "name": "parsel-test",
  "version": "1.0.0",
  "scripts": {
    "build": "parcel build"
  },
  "targets": {
    "esm": {
      "source": "./src/*.ts",
      "outputFormat": "esmodule",
      "distDir": "dist",
      "outputFileName": "[name].mjs"
    }
  },
  "devDependencies": {
    "@parcel/packager-ts": "^2.7.0",
    "@parcel/transformer-typescript-types": "^2.7.0",
    "parcel": "latest",
    "typescript": "^4.8.4"
  }
}

source: 指定所有src目录下的TS文件作为入口
outputFormat: 明确设置为esmodule，强制输出ES模块格式
distDir: 定义输出根目录
outputFileName: 使用[name]变量保留原文件名，添加.mjs后缀明确标识ES模块

如果需要将不同入口输出到不同子路径，可配置多个独立目标：

"targets": {
  "esm-utils": {
    "source": "./src/utils/*.ts",
    "outputFormat": "esmodule",
    "distDir": "dist/utils",
    "outputFileName": "[name].mjs"
  },
  "esm-core": {
    "source": "./src/core/*.ts",
    "outputFormat": "esmodule",
    "distDir": "dist/core",
    "outputFileName": "[name].mjs"
  }
}

2. 调整`tsconfig.json`适配ES模块

将module字段改为ES模块规范，确保TypeScript编译输出与Parcel的ES模块目标匹配：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "es5",
    "sourceMap": true,
    "isolatedModules": true,
    "incremental": false
  },
  "exclude": ["node_modules"]
}