如何在VSCode中配置Node环境以支持CommonJS规范

冬敏小哥_5037

冬敏小哥_5037

2026-07-05

178人浏览

原创

package.json中"type": "module"是node.js模块解析的关键开关:设为"module"则所有.js文件按esm解析(禁用require),删除该字段即恢复commonjs行为(支持require、__dirname等);"type": "commonjs"无效,.mjs/.cjs后缀优先级高于type字段。

如何在vscode中配置node环境以支持commonjs规范

直接改 package.json 里的 "type" 字段就能切回 CommonJS,这是最简单也最可靠的方案。其他“加配置”“装插件”“改 launch.json”的做法,多数是治标不治本,甚至会引入新问题。

为什么 package.json"type": "module" 是关键开关

Node.js 从 v12.20+ 开始,只要项目根目录存在 package.json 且含 "type": "module",所有 .js 文件默认按 ES Module 解析——这时 require()__dirnamemodule.exports 全部失效,报错如 Error [ERR_REQUIRE_ESM]ReferenceError: __dirname is not defined

  • 删掉这一行,Node 就恢复传统 CommonJS 行为:支持 require()exports__dirname__filename
  • 如果项目没有 package.json,新建一个空文件即可(内容可为 {}),Node 默认按 CommonJS 处理
  • 注意:"type": "commonjs" 是无效写法,Node 不识别,只认 "module" 或不设该字段

require() 加载 .mjs 文件时报 ERR_REQUIRE_ESM 怎么办

这不是 VSCode 的问题,而是 Node 模块加载器的硬性限制:CommonJS 的 require() 绝对不能加载 ESM 格式文件(哪怕内容只是 export const x = 1)。

Comprehensive Three.js 3D graphics reference
Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载
  • 别试图用 node --loader 或改文件后缀糊弄,VSCode 的终端或 Code Runner 插件仍会走原生 require() 路径
  • 若必须调用 ESM 模块,改用动态 import()const mod = await import('./utils.mjs');(注意:需在 async 函数内)
  • 若需同步加载(比如 CLI 初始化),用 createRequire 构造专用加载器:import { createRequire } from 'module'; const require = createRequire(import.meta.url);,但只能加载 .cjs 或未被 "type": "module" 影响的 .js

VSCode “运行代码”插件(如 Code Runner)默认行为陷阱

这类插件通常直接执行 node xxx.js,完全不读 package.json"type" 字段,也不管你有没有配置 launch.json。它只看文件扩展名和当前 Node 版本默认规则。

  • 如果你的 index.js 里写了 export default,但 package.json 没设 "type": "module",Code Runner 仍可能因 Node 版本高而报 Unexpected token 'export'
  • 最稳解法:卸载 Code Runner,改用 VSCode 内置调试器(launch.json"runtimeExecutable": "node"),它会尊重 package.json 的模块类型声明
  • 或者,在 VSCode 终端手动运行 node index.js——只要 package.json 正确,结果一定和内置调试器一致

CommonJS 和 ESM 的边界不在编辑器,而在 Node 的模块解析逻辑。VSCode 只是执行环境的入口,真正起作用的是 package.json + Node 版本 + 文件后缀三者组合。改错一个地方,整个链路就断了。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode node node.js js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

3776

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1195

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1538

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9223

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

820

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2204

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1409

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

3729

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2075

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程