Parcel升级后npm run build:js修改app.js而非bundle.js求助

问题根源 #

1. 依赖冲突：同时安装了parcel@2.x和旧版parcel-bundler@1.x，导致命令执行逻辑混乱。
2. 参数使用错误：Parcel 2中--dist-dir是指定输出目录，而非输出文件名，你之前把它设为./public/js/bundle.js属于参数误用。
3. 入口自动检测问题：Parcel 2会默认读取package.json的main字段作为入口候选，导致app.js被误处理。

解决方案 #

1. 清理冲突依赖

卸载旧版parcel-bundler，只保留Parcel 2：

npm uninstall parcel-bundler

2. 修正打包命令参数

调整package.json中的scripts，正确使用--dist-dir指定输出目录，--out-file指定输出文件名：

{
  ...
  "scripts": {
    ...
    "watch:js": "parcel watch ./public/js/index.js --dist-dir ./public/js --out-file bundle.js",
    "build:js": "parcel build ./public/js/index.js --dist-dir ./public/js --out-file bundle.js"
  },
  ...
}

• 如果不需要sourcemap，在命令后添加--no-source-maps即可。

3. 明确指定入口文件

在package.json中添加source字段，告诉Parcel唯一的入口是./public/js/index.js，避免它误处理main字段指向的app.js：

{
  ...
  "source": "./public/js/index.js",
  "main": "app.js",
  ...
}

4. 测试验证

运行npm run watch:js，现在应该会在./public/js下生成bundle.js和bundle.js.map（未禁用sourcemap时），且不会修改根目录的app.js。

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