如何在ES6模块中导入以module.exports导出的npm包？

我刚接触模块系统，希望在浏览器和Node.js应用里统一用ES6 import 语法调用npm包。目前自定义ES6模块的导入导出是正常的：

导出模块代码：

export function foo() {}

导入模块代码：

import * as functions from './functions.js'
functions.foo()

这段代码在浏览器和Node.js里都能正常执行。但像lodash这类用module.exports导出的npm包，用同样的ES6语法导入时：

• Node.js应用里能正常运行
• 配置了type="module"的浏览器应用里会报错：Uncaught SyntaxError SyntaxError: The requested module '../../node_modules/lodash/_apply.js' does not provide an export named 'default'

修改lodash的导出为ES6格式能解决问题，但显然这不现实。我知道ES6模块和CommonJS是不同的模块协议，想请教：有没有可行的方法在ES6模块中导入用module.exports导出的函数？

解决方案 #

1. 使用默认导入语法 #

对于module.exports导出的CommonJS模块，在ES6模块里可以通过默认导入获取整个模块的导出内容，也可以结合解构导入部分方法：

// 导入整个lodash
import _ from 'lodash';
// 解构导入指定方法
import { cloneDeep, debounce } from 'lodash';

主流npm包（比如lodash）大多支持这种方式，不过部分老旧CommonJS包可能需要环境额外解析模块映射。

2. 借助构建工具转换 #

浏览器原生ES模块环境对CommonJS的支持有限，用Vite、Webpack这类构建工具可以自动处理模块格式转换：

• 构建工具会将CommonJS模块转译为浏览器可识别的ES模块
• 同时还能实现tree-shaking、代码压缩等优化
  比如用Vite时，直接写ES6 import语法导入lodash即可，无需额外配置，构建过程会自动完成转换。

3. 导入CDN提供的ES模块版本 #

很多npm包的CDN源提供了专门的ES模块版本，比如lodash-es（lodash的ES模块版），可以直接在浏览器中导入：

import _ from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';

这类版本本身就是用ES6模块语法编写的，原生适配浏览器ES模块环境，不会出现导出错误。

额外说明 #

Node.js能正常运行是因为内置了CommonJS与ES模块的互转逻辑，会自动把CommonJS模块当作默认导出的ES模块处理。但浏览器原生环境没有这个自动转换机制，所以需要通过上述方法解决兼容性问题。

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