使用 Parceljs，如何防止 web 扩展打包时 jquery 和 bootstrap 最小化

Question

我正在使用@parcel/transformer-webextension 转换器并取得了很好的成功。我有一个我正在尝试解决的问题。 Firefox 不高兴。

我从弹出窗口和选项页面的索引页面引用 jquery 和 bootstrap。我从 npm 引用它们，例如：

Parceljs 正在将它们处理为具有生成名称的最小化（再次）文件。这一切在其他浏览器中都能正常运行，但 Firefox 不喜欢这样，因为

1. 它没有意识到这是 jquery，因为生成的文件的哈希值不匹配；和
2. 它使用 innerHtml 在 DOM 中设置值。

如果我可以完整地通过最小化的 jquery 文件，它将接受它，因为它将正确应用散列。见：

JQuery not supported anymore?

如何配置 Parceljs 以保持 jquery.min.js 文件完整，将其传送到 dist 目录，并更新 HTML 中的引用？

提前致谢 - jlo

Answer 1

有两种方法可以解决这个问题。

1. 你可以让你的<script>标签从一个cdn导入，像这样：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.8/jquery.min.js"></script>
   

   Parcel 将保留以“http(s)”开头的任何内容（请参阅documentation）。您必须设置您的manifest.json，以便浏览器允许加载外部资源。我不是这里的专家，但我认为这是一个可以解决的问题（例如，参见 this question）。

2. 您可以设置一个named pipeline，绕过该管道中资产的 js 转换器和优化器。例如，您的 .parcelrc 文件可能如下所示：

   {
     "extends": "@parcel/config-default",
     "transformers": {
       "manifest.json": ["@parcel/transformer-webextension"],
       "raw:*": ["@parcel/transformer-raw"]
     },
     "optimizers": {
       "raw:*": []
     },
     "packagers": {
       "manifest.json": "@parcel/packager-raw-url",
       "raw:*": "@parcel/packager-raw"
     }
   }
   
   

   然后，您可以像这样导入 jquery 和 bootstrap：

   <script src="raw:../../node_modules/jquery/dist/jquery.min.js"></script>
   <script src="raw:../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   

   请注意，脚本导入确实没有设置了type: "module"。在我的测试中，这很重要，因为如果 parcel 看到 type="module"，它将尝试范围提升，从而导致错误。我认为从浏览器的角度来看这也是正确的，因为它们不是模块包。

   在我的测试中，上述配置会给你两个文件（dist 目录中的bootstrap.bundle.min.[hash].js 和jquery.min.[hash].js。这些文件与node_modules 中的相应文件内容相同。我不认为 Firefox会抱怨包裹在他们的名字后面加了[hash]，只要内容相同（见here）。