我正在尝试编译一个我编写的库，以便可以将分布式文件放入script标记并在浏览器中运行。我正在尝试用 Parcel 2 来做到这一点。我觉得我已经很接近了，但每次我认为我在那里时都会出现一些新问题。

关键是我想要它not捆绑外部依赖项（例如 jQuery），因为它们可能已经存在于将使用此库的站点中。

目标是能够编写包含以下内容的 HTML 文件，并让所有内容正确加载和工作

<script src="/jquery.js"></script>
<script src="/mylib.js"></script>

使用常规构建过程

包裹常规构建（例如parcel build src/mylib.js）将编译后的 JS 输出为 CommonJS，这意味着它有require()里面有函数。这些在浏览器中不起作用。

我正在考虑的一个选项是 RequireJS 或 Browserify 来使 CommonJS 工作，但我真的希望 Parcel 构建只输出我需要的内容。

使用浏览器目标

In package.json:

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

context and outputFormat尝试强制纯客户端 JavaScript 输出。

在构建时，输出：

@parcel/packager-js: External modules are not supported when building for browser

我添加了includeNodeModules.jQuery=false希望回避这个问题，但没有成功。

包裹服务促进发展

Using parcel serve view/myapp.html构建一个完全在浏览器中运行的应用程序版本。require()被一些 Parcel 内部结构取代（newRequire or parcelRequires我认为）并且它的工作原理与您想要的完全一样。除此之外，它还捆绑了大量 websockets 内容以与 Parcel 内置服务器集成，因此无法分发使用。但很明显，Parcel 只能构建客户端 JavaScript，我只是不明白是什么parcel serve正在幕后做事以获得parcel build命令以同样的方式工作。

这种方法还捆绑了我不希望它这样做的外部组件（即 jQuery），但如果我至少可以获得一个不包含所有 websockets/dev 内容的可分发输出，那么这将是正确的一步方向。

我缺少什么？我想要用 Parcel 做的事情是否可行，或者我是否需要将 CommonJS 转换为浏览器 JS？

谢谢你！

Edit

再多一点实验，又向死胡同迈出了一步：

in package.json我已经指定了不包括 jquery 的生产构建目标：

"targets" : {
    "demo" : {
      "source" : "views/demo.html",
      "includeNodeModules" : {
        "jquery" : false
      }
    }
  },

这构建了一些东西would在浏览器中运行，但其前缀为

import t from"jquery"

如果我设置script tag to type="module"然后这将加载，但无法解析jquery到我在单独的文件中指定的 jquery 版本script标签。也许有一种方法可以告诉脚本模块它的“名称”是jquery?

这仍然不是我想要的，因为我可能无法控制 jqueryscript这个库将使用的标签，我只是希望它接受会有一个$在它可以使用的全局命名空间中。

而不是试图排除jquery从一个"outputFormat": "global"捆绑使用includedNodeModules尝试使用全局别名 https://parceljs.org/features/dependency-resolution/#global-aliases反而：

您的 package.json 可能如下所示：

{
  ...
  "global": "dist/library.global.js",
  "targets": {
    "global": {
      "context": "browser",
      "outputFormat": "global"
    }
  },
  "alias": {
    "jquery": {
      "global": "$"
    }
  },
  "scripts": {
    "watch": "parcel watch src/library.js",
    "build": "parcel build src/library.js",
  },
  "peerDependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "parcel": "2.0.0-rc.0",
  }
}