使用Parceljs打包Web扩展时如何避免jquery、bootstrap被二次压缩

方案1：HTML标签属性透传（推荐） #

在弹窗、选项页的HTML文件中，给引用jquery、bootstrap预构建min文件的script标签添加data-parcel-pass-through属性，Parcel会直接跳过对这些资源的压缩、哈希重命名流程，原样输出到dist目录，同时自动更新引用路径匹配输出位置：

<!-- 路径根据你项目node_modules相对位置调整即可 -->
<script src="./node_modules/jquery/dist/jquery.min.js" data-parcel-pass-through></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" data-parcel-pass-through></script>

• 该配置无需修改全局规则，仅作用于标注的资源，不会影响其他文件的打包逻辑
• 打包后直接检查dist目录下的对应文件，和node_modules中的官方文件完全一致，可直接通过Firefox的哈希校验

方案2：全局配置优化器排除规则 #

如果需要批量处理多个页面的同类引用，可在项目根目录新建/修改.parcelrc文件，配置指定文件跳过优化处理：

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "**/jquery.min.js": [],
    "**/bootstrap*.min.js": []
  }
}

• 规则中的通配符可以匹配任意目录下的对应文件，全局生效无需逐个标注标签
• 若需强制保留原始文件名无哈希后缀，可额外在package.json中添加配置："@parcel/transformer-js": {"outputFormat": "global"}

附加innerHTML兼容处理 #

针对Firefox不允许innerHTML动态插入脚本的问题，可选择两种处理方式：

• 将innerHTML赋值逻辑替换为原生document.createElement、appendChild等DOM操作方法实现
• 在扩展的manifest.json的content_security_policy字段中添加'unsafe-inline'规则，允许动态插入脚本执行

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