JavaScript中导入AlertifyJS失败问题咨询

问题原因及解决方案 #

• 首先确认是否已通过包管理器安装依赖
  直接在JS文件中导入第三方库前，需要先执行安装命令，未安装的情况下会提示模块不存在：

  npm install alertifyjs --save
  

  如果你是导入本地下载的AlertifyJS文件，需要确认./AlertifyJS路径拼写完全正确，且对应目录下确实存在对应JS文件。

• 修正导入写法
  AlertifyJS的官方构建产物为UMD格式，正确导入写法如下：

  // 导入核心库
  import alertify from 'alertifyjs';
  // 必须同步导入配套样式，否则组件样式会异常
  import 'alertifyjs/build/css/alertify.min.css';
  import 'alertifyjs/build/css/themes/default.min.css';
  

  你之前尝试的import * as alertify from 'alertify.js'拼写错误，正确包名是alertifyjs，没有中间的分隔点。

• 非ES模块环境的适配
  如果是CommonJS环境使用require导入，需要取default属性才能拿到正确实例：

  const alertify = require('alertifyjs').default;
  

  如果你导入的是本地下载的UMD格式JS文件，ES模块化导入无法识别其默认导出，可以直接通过window对象获取全局挂载的实例：

  import './AlertifyJS/alertify.min.js';
  const alertify = window.alertify;
  

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