Parcel.js如何配置将多个JS文件打包为单个bundle文件

问题原因 #

你当前使用./src/**/*.js通配符将所有匹配到的JS文件作为独立入口传给Parcel，Parcel默认会为每个入口生成单独的构建产物，因此会输出独立的main.js、tools.js两个文件，不会自动合并。

具体操作步骤 #

• 第一步：建立文件依赖关系
  打包工具合并文件的前提是从单个入口出发，递归收集所有依赖模块。你需要在主入口文件中显式引入需要合并的其他文件，同时可以通过引入顺序控制代码执行顺序。
  修改src/main.js内容如下：

/** main.js */
import './tools.js'
console.log("Hey")

这里使用副作用导入引入tools.js，tools.js中的代码会在main.js自身逻辑执行前运行，刚好匹配你预期的执行顺序。

• 第二步：修改构建命令，指定单个入口
  将原来的通配符多入口命令替换为单入口命令，仅传入主入口文件路径：

parcel build ./src/main.js

• 第三步（可选）：自定义输出文件名为bundle.js
  如果需要固定输出文件名为bundle.js而非默认的main.js，可以在项目根目录的package.json中添加target配置：

{
  "targets": {
    "default": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      },
      "outputFormat": "global",
      "distDir": "./dist",
      "name": "bundle"
    }
  }
}

配置中"name": "bundle"字段会指定最终输出的JS文件名为bundle.js。

效果验证 #

配置完成后执行构建命令，dist目录下会生成单个bundle.js文件，核心执行逻辑和你预期完全一致：先执行tools.js中的console.log("Hoo")，再执行main.js中的console.log("Hey")。

注意：不建议在无依赖关系的前提下强制让Parcel合并多入口文件，这种方式不符合打包工具的模块解析逻辑，后续维护时很容易出现执行顺序混乱、重复代码等问题，单入口+显式导入依赖是最稳定、通用的实现方式。

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