Node.js与浏览器共用JS编写技巧

本文深入探讨了如何编写真正跨平台的JavaScript代码，使其无缝运行于Node.js和浏览器两大环境：通过精准检测全局对象（如process和window）来识别运行时环境，严格规避fs、document等平台专属API，借助node-fetch、path-browserify等polyfill弥合功能差异，并采用ES模块规范配合package.json的"type": "module"配置实现语法级兼容；核心思想是抽象环境差异、统一接口设计，让开发者一次编写、两端运行，极大提升工具库的可移植性与维护效率。

要让JavaScript代码在Node.js和浏览器中都能运行，关键在于避免使用环境特有的API，并通过条件判断来适配不同环境。以下是具体实现方法。

1. 检测当前运行环境

通过检查全局对象来判断代码运行在哪个环境中：

• 浏览器环境中，typeof window !== 'undefined' 为真
• Node.js环境中，typeof process !== 'undefined' && process.versions?.node 为真

可以封装一个简单的检测函数：

2. 避免使用环境专有API

不要直接使用只存在于某一环境的全局变量或模块，例如：

• Node.js中的 require('fs')、__dirname
• 浏览器中的 document、localStorage（在Node中无默认实现）

如果需要文件操作或网络请求，应抽象成统一接口，根据环境选择实现。

3. 使用兼容性模块或polyfill

某些功能在两个环境中行为不一致，可引入通用实现：

• 使用 fetch：浏览器原生支持，Node.js从18版本开始支持，旧版本可通过 node-fetch 或 undici 补充
• 路径处理：使用 path 模块时，在浏览器中可用 path-browserify
• Buffer：浏览器中可通过 buffer npm包模拟

打包工具如Webpack或Rollup可自动注入这些polyfill。

4. 导出兼容模块语法

Node.js支持CommonJS（module.exports）和ES Module，浏览器推荐使用ES Module。建议使用ESM语法并配置package.json：

基本上就这些。核心是识别环境差异，隔离平台相关逻辑，用统一接口对外暴露功能。这样写的代码可移植性强，适合工具库开发。

终于介绍完啦！小伙伴们，这篇关于《Node.js与浏览器共用JS编写技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！