Top-level await在Parcel构建时报错但Live Server/WebStorm中正常运行的问题咨询

我懂你碰到的这个坑——本地用Live Server或者WebStorm实时编辑时，top-level await跑得好好的，一用Parcel打包就抛语法错误。核心原因是Parcel默认的打包输出格式没把你的代码当作ES模块处理，而浏览器只有在识别到ES模块时才允许使用top-level await。

问题根源拆解 #

你的HTML里已经给script标签加了type="module"，本地预览时浏览器会直接以ES模块的方式加载script.js，自然支持top-level await。但Parcel默认可能会把代码打包成非模块格式（比如IIFE立即执行函数），这时候浏览器不再把它当作ES模块，就会触发await is only valid in async functions...的报错。

解决方案 #

方案1：在配置文件里指定ES模块输出

直接在package.json里添加Parcel的专属配置，强制输出ES模块格式：

{
  "devDependencies": {
    "parcel": "^2.2.1"
  },
  "name": "top-level-await",
  "version": "1.0.0",
  "main": "index.js",
  "author": "elmi-elmi",
  "license": "MIT",
  "parcel": {
    "targets": {
      "default": {
        "outputFormat": "esmodule"
      }
    }
  }
}

方案2：命令行直接指定输出格式

如果不想改配置文件，打包时直接加参数就行：

npx parcel index.html --output-format esmodule

方案3：清理缓存再重试（可选）

有时候Parcel的缓存会导致一些奇怪的问题，先删缓存和输出目录再重新打包：

rm -rf .parcel-cache dist && npx parcel index.html --output-format esmodule

验证方法 #

重新打包后，打开生成的dist/index.html，检查里面的script标签是否还保留着type="module"属性。如果是的话，浏览器就会以ES模块方式加载打包后的代码，top-level await就能正常工作了。

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