如何在HTML的script脚本中使用Crypto-JS？模块导入报错如何解决？

问题根因 #

浏览器原生ES模块规范不支持「裸模块导入」（即导入语句直接写第三方包名crypto-js的写法），这种写法仅能在Node.js环境、或经过前端构建工具（Webpack/Vite等）处理后正常运行。你在终端运行正常是因为Node.js内置了裸模块的路径解析逻辑，直接在浏览器打开静态HTML时没有对应的解析能力，所以抛出路径格式错误。

解决方案 #

方案1：使用ESM格式的CDN资源（最适合纯静态页面场景） #

直接修改crypto.js里的导入语句，替换为公开CDN的ESM格式crypto-js资源即可：

// 替换原来的 import CryptoJS from 'crypto-js';
import CryptoJS from 'https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/+esm';

无需修改其他代码，直接刷新页面即可正常运行。

方案2：使用前端构建工具处理 #

如果你的项目后续会迭代更多功能，建议引入轻量构建工具：

1. 项目根目录执行对应初始化命令，选择原生JS模板
2. 把现有代码迁移到生成的项目结构中
3. 执行安装crypto-js的命令，保留原来的import CryptoJS from 'crypto-js'语句即可
4. 开发时启动本地开发服务器，构建部署时执行打包命令生成可直接在浏览器运行的产物。

方案3：本地引入依赖文件 #

如果不想用CDN也不想用构建工具，可以把npm安装后的crypto-js ESM产物拷贝到项目的静态资源目录中，再用相对路径导入：

1. 执行npm install crypto-js安装依赖
2. 把node_modules/crypto-js/crypto-js.js拷贝到项目的scripts/lib目录下
3. 修改crypto.js的导入语句为：

import CryptoJS from './lib/crypto-js.js';

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