Node可运行的JS import在HTML脚本中出现模块解析错误

问题根源 #

Node.js允许通过裸模块名（比如import 'js-logger'）自动从node_modules目录加载依赖，但浏览器的ES模块系统不支持这种裸模块解析规则——它要求模块路径必须是相对路径、绝对路径或完整URL，所以即便本地node_modules里有js-logger，浏览器也找不到对应的模块文件。

可行解决方案 #

方案1：直接使用相对路径引用模块 #

找到node_modules/js-logger下的入口文件（通常是dist/js-logger.min.js或src/logger.js），将main.mjs里的裸模块导入替换为相对路径：

// 替换原导入语句
import logger from './node_modules/js-logger/dist/js-logger.min.js';

注意：如果@hashgraph/sdk内部也依赖js-logger，这种方法需要修改SDK内部的导入路径，仅适合简单场景。

方案2：用打包工具处理依赖（推荐） #

使用Vite、Webpack或Rollup这类打包工具，将你的代码和所有依赖打包成浏览器可识别的单文件：

1. 初始化项目（未初始化过的话）：

   npm init -y
   

2. 安装Vite：

   npm install vite --save-dev
   

3. 创建vite.config.js配置文件：

   export default {
     build: {
       entry: './main.mjs',
       outDir: 'dist'
     }
   }
   

4. 执行打包：

   npx vite build
   

5. 把dist目录下的打包产物引入HTML，或者直接用Vite开发服务运行：

   npx vite
   

   访问本地服务地址即可，Vite会自动处理所有模块的解析和依赖加载。

方案3：改用ES模块CDN #

使用支持ES模块分发的CDN服务，通过完整URL引入依赖模块，无需依赖本地node_modules。只需将main.mjs或HTML脚本中的裸模块名替换为CDN提供的模块URL，浏览器就能直接解析加载。

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