vue-cal 3.11升级后缺失drag-and-drop.js引发构建错误咨询

问题 #

我有一个Vue项目，使用vue-cal 3.9版本时一切正常，执行ls node_modules/vue-cal/dist能看到drag-and-drop.js文件。升级到3.11版本后，该目录下的文件变为：

drag-and-drop.amd.js    drag-and-drop.es.js     vue-cal.amd.js          vue-cal.es.js           vuecal.css
drag-and-drop.cjs.js    i18n                    vue-cal.cjs.js          vue-cal.iife.js

构建时出现以下错误：

This dependency was not found:

* vue-cal/dist/drag-and-drop.js in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/events/Calendar.vue?vue&type=script&lang=js&

现咨询两个问题：
1）新版本为何没有原生drag-and-drop.js文件？
2）如何正常使用vue-cal 3.11版本？

解答 #

1）关于文件消失的原因：
vue-cal 3.11版本调整了打包输出策略，不再提供无后缀的通用JS文件，转而输出适配不同模块化规范的版本：

• .cjs.js：适用于CommonJS环境（比如Node.js）
• .amd.js：适用于AMD模块加载器
• .es.js：适用于ES模块环境（现代浏览器、Vue CLI/Webpack等构建工具）
  这种调整是现代前端库的常见做法，能更好地适配不同的项目构建环境和工具链。

2）正常使用vue-cal 3.11版本的解决方案：

• 修改导入路径：根据你的项目构建环境，替换原来的导入语句。比如：
  • 如果是Vue CLI/Webpack等支持ES模块的环境，改为：

    import dragAndDrop from 'vue-cal/dist/drag-and-drop.es.js'
    

  • 如果是CommonJS环境，改为：

    const dragAndDrop = require('vue-cal/dist/drag-and-drop.cjs.js')
    

• 使用官方推荐的导入方式：直接从库的主入口导入所需功能，无需手动指定dist目录下的具体文件，由构建工具自动选择适配的模块版本，示例：

  import VueCal from 'vue-cal'
  import 'vue-cal/dist/vuecal.css'
  import { dragAndDrop } from 'vue-cal'
  

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