使用RequireJS引入Plyr库报错：Plyr is not a constructor

常见原因及修复步骤 #

1. 适配Plyr的AMD模块导出格式 #

Plyr本身支持AMD规范，但部分版本会通过default属性导出构造函数，而非直接暴露。你需要在RequireJS配置里指定正确路径，并在回调中做兼容处理：

require.config({
  paths: {
    'plyr': 'path/to/plyr.min' // 替换为你的Plyr文件实际路径，无需加.js后缀
  }
});

require(['plyr'], function(Plyr) {
  // 兼容不同版本的导出方式
  const PlyrConstructor = Plyr.default || Plyr;
  const player = new PlyrConstructor('#audio-element');
  // 后续自定义音频源等操作
});

2. 针对旧版本Plyr配置shim #

如果使用的是未完全实现AMD规范的旧版Plyr，需要通过shim配置告知RequireJS它的全局导出变量：

require.config({
  paths: {
    'plyr': 'path/to/plyr.min'
  },
  shim: {
    'plyr': {
      exports: 'Plyr' // 声明Plyr会在全局作用域暴露Plyr变量
    }
  }
});

require(['plyr'], function(Plyr) {
  const player = new Plyr('#audio-element');
});

3. 排查加载基础问题 #

• 检查控制台是否有Plyr文件的404错误，确认路径配置正确
• 确认没有其他脚本覆盖了全局的Plyr变量
• 确保调用new Plyr()的代码在模块加载完成的回调内执行，避免提前调用

4. 调试模块导出结构 #

可以在回调中打印Plyr对象，明确构造函数的实际位置：

require(['plyr'], function(Plyr) {
  console.log(Plyr); // 查看输出的对象结构，定位构造函数所在属性
});

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