关键在于让 babel 只做语法降级，不转换 import/export 语句，需在 @babel/preset-env 中配置 "modules": false，使模块语法原样保留供 webpack、rollup 或 vite 进行静态分析与 tree shaking。

关键在于让 Babel 只做语法降级，不碰 import/export 语句——这些必须原样留给 webpack、rollup 或 vite 做静态分析。

关闭模块语法转换

Babel 默认会把 ES 模块转成 CommonJS（require/module.exports），这直接破坏 Tree Shaking 和 ESM 的静态特性。必须显式禁用：

• 在 babel.config.js 或 .babelrc 中，为 @babel/preset-env 设置 "modules": false
• 配置示例：

  {
    "presets": [
      ["@babel/preset-env", {
        "modules": false,
        "targets": { "esmodules": true }
      }]
    ]
  }

• 这样 Babel 仅处理箭头函数、可选链、nullish 合并等语法，import 和 export 保留不动

配合打包工具启用 ESM 目标

光 Babel 不转模块还不够，下游工具需明确支持原生 ESM：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• webpack：设 mode: "production" 并确保 experiments.outputModule: true（v5.10+）或使用 output.module: true（v5.20+）
• vite：默认即以 ESM 方式服务和构建，无需额外配置，但需确认 build.target 不降级到不支持 ESM 的环境（如 IE）
• rollup：天然基于 ESM，只要输入是 import/export，输出格式选 es 即可

避免意外引入 CommonJS 依赖干扰

第三方库若混用 CommonJS，可能污染模块图。可针对性处理：

• 对纯 ESM 库（如 litegraph.js），用 babel-plugin-import 实现路径级按需加载，保持子模块独立导出结构
• 对混合模块库，可在 webpack 中用 resolve.fullySpecified: true 强制解析为 ESM，或通过 resolve.alias 指向其 exports 字段定义的 ESM 入口
• 检查 node_modules 中库的 package.json 是否含 "type": "module" 或 "exports" 字段，优先信任这些声明

验证是否真正保留了 ESM

别只看配置，要确认最终产物里还存在 import 关键字：

• 临时把打包产物（如 dist/main.js）用文本编辑器打开，搜索 import 或 export —— 如果已变成 require 或 Object.defineProperty 包装，说明 Babel 或其他 loader 仍在干预模块语法
• 用 npm pkg get type 查看项目根目录 package.json 是否设了 "type": "module"，有则整个项目默认按 ESM 解析
• 在源码中写一句 import.meta.url，运行时打印看看是否能取到值——这是 ESM 独有的元信息，CommonJS 下为 undefined

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南