如何以ES6模块方式加载ML5库？

你遇到的问题根源是：你使用的ml5.min.js是UMD格式的构建包，它没有适配ES6模块的导出规则，导致直接用ES6 import语法会出现各种不匹配的问题。

正确的ES6模块导入方式 #

改用ML5的ES模块专用构建文件，修改导入路径即可：

import ml5 from "https://unpkg.com/ml5@1.3.1/dist/ml5.esm.js";

// 现在可以正常调用handPose
const handPoseModel = ml5.handPose();

为什么之前的方式失败 #

• 第一种默认导入：UMD包没有定义default导出，所以提示无默认导出。
• 第二种命名空间导入：UMD包在ES模块环境下，不会将内部方法（如handPose）挂载到导入的命名空间对象上，因此找不到ml5.handPose。
• 第三种命名导入：UMD包根本没有单独导出handPose这个命名成员，所以提示未导出。

备选方案（传统加载方式） #

如果不想用ES模块，直接用脚本标签加载UMD包，全局使用ml5对象：

<script src="https://unpkg.com/ml5@1.3.1/dist/ml5.min.js"></script>
<script>
  const handPoseModel = ml5.handPose();
</script>

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