如何在JavaScript文件中导入lodash？模块解析失败求解决

问题根源 #

浏览器原生ES模块不支持直接通过包名（如lodash）导入依赖，必须使用相对/绝对路径；而Live Server只是静态文件服务器，不会像Node.js或打包工具那样去node_modules里查找模块。另外你的代码里还有个错误：add是lodash的方法，需要通过_.add调用，不是全局函数。

方案1：使用完整相对路径导入lodash #

直接指向node_modules里的lodash入口文件，修改导入语句：

// 注意路径要根据你的文件位置调整，确保正确指向node_modules下的lodash.js
import _ from './node_modules/lodash/lodash.js';

console.log(_.add(10, 3)); // 修正为_.add

方案2：使用lodash的ES模块版本（lodash-es） #

安装专为ES模块设计的lodash-es：

npm install lodash-es --save

然后用相对路径导入，支持按需加载：

// 完整导入
import _ from './node_modules/lodash-es/lodash.js';
// 或按需导入（减少体积）
import { add } from './node_modules/lodash-es/add.js';

console.log(add(10, 3)); // 按需导入可直接用add

方案3：使用打包工具（推荐） #

静态服务器无法处理模块解析，用打包工具（如Vite、Webpack）可以将依赖打包成浏览器能识别的文件，同时支持直接用包名导入：

1. 初始化Vite项目：

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install lodash --save

2. 在代码中直接导入：

import _ from 'lodash';
console.log(_.add(10, 3));

3. 启动开发服务器：

npm run dev

这样就可以正常运行，无需手动处理路径。

方案4：直接引入CDN链接（快速测试） #

跳过npm安装，在HTML中通过script标签引入lodash的CDN版本，全局使用_：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script type="module">
  console.log(_.add(10, 3));
</script>

内容的提问来源于stack exchange，提问作者Богдан Гапон</think_never_used_51bce0c785ca2f68081bfa7d91973934>