Parcel 2构建浏览器端库：如何输出非CommonJS/ES模块的script可用产物

你配置的核心问题有两个：

1. 仅配置includeNodeModules.jquery = false仅告知Parcel不打包jQuery依赖，但未指定依赖解析的映射规则，Parcel不知道需要将代码中引入的jquery模块替换为全局$对象，因此抛出外部模块不支持的错误。
2. isLibrary参数配置错误，构建库产物时该参数需设为true。

正确package.json配置 #

{
  "targets": {
    "regular": {
      "source": "src/mylib.js",
      "context": "browser",
      "outputFormat": "global",
      "isLibrary": true,
      "includeNodeModules": {
        "jquery": false
      },
      "externals": {
        "jquery": "$"
      }
    }
  }
}

构建命令 #

执行parcel build --target regular即可得到符合要求的产物：

• 输出为IIFE格式，无require/import语句，可直接通过普通script标签引入
• 不会打包jQuery代码，所有对jquery模块的引用会自动替换为读取全局window.$对象
• 无开发环境相关的调试、热重载代码，可直接分发使用

之前尝试的问题说明 #

• 直接执行parcel build src/mylib.js未指定构建目标，Parcel默认按Node环境输出CommonJS格式产物，因此带有require语句无法在浏览器直接运行
• 以HTML为构建入口的配置默认输出ESModule格式产物，因此带有import语句，需要添加type="module"属性才能加载，不符合非ESM场景的使用需求

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