如何解决导入asva-js-password-package时出现ReferenceError module is not defined错误

报错原因 #

你引入的@marcusfernstrom/asva-password@1.1.5默认入口为CommonJS规范文件，该规范依赖Node.js环境内置的module全局对象实现模块导出，浏览器原生环境不存在该对象，因此直接通过普通<script>标签引入时会抛出ReferenceError: module is not defined错误。

解决方法 #

• 方法1：使用原生ES模块引入
  主流现代浏览器均支持原生ES模块，你可以修改引入方式，指定script标签类型为module直接导入ESM版本的包：

  <script type="module">
    import AsvaPassword from 'https://unpkg.com/@marcusfernstrom/asva-password@1.1.5/index.esm.js'
    // 示例用法
    const passwordChecker = new AsvaPassword.PasswordChecker()
  </script>
  

• 方法2：通过前端构建工具引入
  如果你使用的是带构建流程的前端项目（如Vue、React、Vite、Webpack项目），可以先通过包管理器安装依赖后导入使用：

  1. 执行安装命令

  npm install @marcusfernstrom/asva-password
  

  2. 在业务代码中导入

  import { PasswordChecker } from '@marcusfernstrom/asva-password'
  // 后续直接调用相关API即可
  

• 方法3：直接引入UMD兼容版本
  如果你需要通过全局script标签挂载使用，可以直接引入该包的UMD构建产物，UMD格式会自动适配浏览器全局环境，无需额外配置：

  <script src="https://unpkg.com/@marcusfernstrom/asva-password@1.1.5/index.umd.js"></script>
  <script>
    // 包会自动挂载到window全局对象，直接调用即可
    const passwordChecker = new AsvaPassword.PasswordChecker()
  </script>
  

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