JS如何批量导入文件夹内全部图片？Parcel构建部署时报错如何解决？

1. ES 模块原生不支持通配符导入：你写的import images from './img/*.jpg'不是标准ES模块语法，仅Parcel 1版本（对应你依赖里的parcel-bundler包）支持这种无前缀的通配符导入写法。
2. 依赖版本冲突：你的项目同时安装了Parcel 1（parcel-bundler@1.12.5）和Parcel 2（parcel@^2.0.0-rc.0），本地开发时默认调用了Parcel 1的逻辑所以能正常运行，部署构建时触发了Parcel 2的解析规则，Parcel 2不识别无前缀的通配符导入，因此报错。
3. 无效依赖干扰：你安装的img依赖和本次图片导入逻辑无关，也可能造成路径解析异常。

• 第一步：清理冲突依赖，执行命令卸载不需要的包：

npm uninstall parcel-bundler img

• 第二步：修改批量导入语法，Parcel 2要求通配符导入必须添加glob:前缀，把你原来的导入语句改成：

import imgs from 'glob:./../img/*.jpg';

导入完成后得到的imgs是键值对格式对象，键为原图片文件名（比如1.jpg），值为打包后对应的图片可访问路径，你可以直接按需求取用。

• 第三步：修正构建脚本参数，Parcel 2已经弃用了-d输出目录参数，替换为--dist-dir，把package.json里的scripts字段修改为：

{
  "default": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist --no-minify"
  },
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-image": "^2.0.0-rc.0",
    "parcel": "^2.0.0-rc.0"
  },
  "dependencies": {
    "core-js": "^3.18.0",
    "regenerator-runtime": "^0.13.9"
  }
}

修改完成后重新执行构建即可正常打包所有图片。

内容的提问来源于stack exchange，提问作者Дмитрий Миргородський