如何解决npm Parcel构建失败：main字段指定index.html报错

问题原因 #

Parcel 2版本迭代后，main字段回归了npm包的标准定义——仅用于指定JavaScript类文件（.js/.mjs/.cjs）的入口，不再支持将HTML文件设为main值。你看到的讲师操作是基于较早版本的Parcel 2，当时的规则还未统一。

解决方案 #

你可以任选以下一种方法解决：

方法1：改用source字段指定HTML入口 #

修改你的package.json，将原来的"main": "index.html"替换为：

{
  "source": "index.html"
}

之后直接运行parcel命令即可，Parcel会自动识别source字段作为web应用的入口文件。

方法2：通过targets配置区分入口（适合同时需要npm包入口的场景） #

如果你的项目需要保留main字段作为npm包的JS入口，可以添加targets配置单独指定web端的HTML入口：

{
  "main": "src/index.js",
  "targets": {
    "web": {
      "source": "index.html"
    }
  }
}

方法3：命令行直接指定入口文件 #

不需要修改package.json，运行Parcel时直接传入HTML文件路径：

parcel index.html

内容的提问来源于stack exchange，提问作者Jamil Rahman Mowahid