如何在Electron应用客户端ES6代码中导入Node模块？

嘿，能不用重型转译器搞定同构ES模块真的超爽！不过你遇到的这个问题太典型了——Chromium浏览器环境本身没有Node.js那套模块解析逻辑（自动找node_modules、读取package.json入口这些），所以它根本不知道immutable这个包名对应哪个具体的JS文件，自然会抛出解析错误。

下面给你几个适配同构场景的通用解决方案，按对你的需求适配度排序：

1. 条件动态导入（最贴合你的需求） #

既然你明确只会在服务端用到Immutable，那可以通过环境判断，让客户端完全跳过这个模块的导入，服务端正常加载：

// 先判断当前运行环境是服务端（Node.js）还是客户端（Electron浏览器）
const isServer = typeof process !== 'undefined' && process.versions?.node != null;

let Immutable;
if (isServer) {
  // 服务端用动态导入（或者静态导入也可以，这里统一写法）
  const immutableModule = await import('immutable');
  Immutable = immutableModule.default; // Immutable的ESM导出是default
}
// 客户端环境下，Immutable会是undefined，后续使用前做判断即可

// 业务逻辑里先检查Immutable是否存在再使用
if (Immutable) {
  Immutable.List.of([]);
}

export const foo = {};

这种方法的好处是客户端完全不会加载Immutable的代码，既解决了错误，又减小了客户端包体积。

2. 使用Import Maps（适合客户端也需要依赖的场景） #

如果你之后客户端也需要用到Immutable，Chromium 61+（需要开启实验性Web特性）支持Import Maps，可以在HTML里定义包名到具体文件的映射，让浏览器知道immutable对应哪个文件：

首先在Electron加载的HTML文件中添加：

<script type="importmap">
{
  "imports": {
    "immutable": "https://unpkg.com/immutable@4.0.0/dist/immutable.esm.js"
  }
}
</script>

（注意替换成你使用的Immutable版本，也可以映射到本地node_modules里的ESM文件，比如./node_modules/immutable/dist/immutable.esm.js，但要确保Electron能正确访问到这个路径）

之后客户端的import Immutable from 'immutable'就会自动加载你指定的文件，和服务端的导入写法完全一致。

3. 封装同构适配模块 #

把需要跨环境使用的依赖封装成一个适配层，统一对外暴露接口，内部根据环境切换实现：

创建./utils/immutable-adapter.js：

// 服务端环境
if (typeof process !== 'undefined' && process.versions?.node) {
  export default (await import('immutable')).default;
} else {
  // 客户端环境：如果不需要功能就导出空对象，需要的话导入CDN/本地文件
  export default (await import('https://unpkg.com/immutable@4.0.0/dist/immutable.esm.js')).default;
  // 或者客户端不需要的话：export default {};
}

然后在业务代码里导入这个适配模块：

import Immutable from './utils/immutable-adapter.js';

// 后续用法和之前一致
if (Immutable.List) {
  Immutable.List.of([]);
}

export const foo = {};

这种方式的优势是业务代码不需要关心环境差异，适配逻辑全部集中在一个文件里，后期维护更方便。

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