前端工程化 · 53/90
1. Babel 的工作原理 2. body-parser 中间件的作用 3. Babel 转译原理 4. 浏览器和 Node 中的事件循环区别 5. 职责链模式 6. 链模式 7. 命令模式 8. 组件封装设计 9. 数据统计 10. dependencies 和 devDependencies 的区别 11. CommonJS 和 ES6 模块引入的区别 12. 设计模式分类 13. 前端开发中常用的设计模式 14. 设计模式应用场景 15. 设计原则 16. 开发环境搭建要点 17. Electron 理解 18. 前后端分离是什么 19. 工厂模式 20. 前端代码重构 21. 前端组件化 22. 前端工程师职业发展 23. 前端工程化方向 24. 前端工程化的理解 25. 前端工程价值体现 26. 前端工程化 27. Git 常用命令与工作流 28. Gulp 任务自动化工具 29. 图片导出 30. 前端模块化规范 31. 迭代器模式 32. JavaScript 编码规范 33. 前端 CI/CD 流程 34. jQuery 生态对比 35. jQuery 实现原理 36. jQuery 与 Sizzle 选择器集成 37. Koa 中间件异常处理 38. jQuery 源码优秀实践 39. jQuery 与 Zepto 对比 40. jQuery UI 自定义组件 41. Koa 中间件不调用 await next() 的影响 42. Koa 在没有 async/await 时如何实现洋葱模型 43. Koa 和 Express 的区别 44. Koa 洋葱模型 45. 登录实现 46. 中介者模式 47. 模块模式 48. 小程序架构 49. 小程序常见问题 50. Monorepo 概念与工具 51. mpvue 框架 52. MVC vs MVP vs MVVM 53. Node.js ES Module 为什么必须加文件扩展名 54. MVC、MVP 和 MVVM 架构模式 55. Node.js 全局对象 56. Node.js 性能监控与优化 57. Node.js 多进程与进程通讯 58. Node.js 调试方法 59. Node.js 中的 process 对象 60. Node.js 的理解与应用场景 61. npm 是什么? 62. 观察者模式和发布订阅模式的区别 63. 页面重构方法 64. PM2 守护进程原理 65. 分页功能的前后端设计 66. PostCSS 作用 67. 项目管理方法 68. Rollup 打包工具 69. 高质量前端代码 70. JavaScript 单例模式实现 71. SSG 静态网站生成 72. 模板方法模式 73. 设计模式的六大原则 74. Tree Shaking 原理 75. 用户授权信息获取流程 76. Vite 原理与性能优势 77. Web App vs Hybrid App vs Native App 78. Web 前端开发注意事项 79. Web APP 设计原则 80. Webpack 构建流程 81. Hash vs ChunkHash vs ContentHash 82. Webpack 热更新原理 83. Webpack Loader 与 Plugin 区别 84. webpack 的 module、bundle、chunk 是什么 85. Webpack Proxy 工作原理与跨域解决 86. webpack、rollup、parcel 的选择 87. WePy 与 mpvue 对比 88. WXML 和 WXSS 89. Webpack Scope Hoisting 90. Zepto 实现原理

Node.js ES Module 为什么必须加文件扩展名

解释 Node.js 中 ES Module 需要完整路径和扩展名的原因

问题

为什么 Node.js 在使用 ES Module 时必须加上文件扩展名?

解答

这个问题涉及两个方面:如何识别 ES Module,以及为什么需要完整路径。

无法从语法上区分 ES Module

TC39 在设计 ES Module 时,无法从语法上严格区分一段代码是 ES Module 还是传统 Script(CommonJS 本质上仍是传统 Script)。

虽然从开发者角度看,有 import/export 语句就是 ES Module,但没有这些语句也不代表就不是 ES Module。Node 社区曾在 TC39 提出过几种方案:

方案 1:引入 “use module” 指令

"use module";
// 模块代码

优点是容易理解和实现,缺点是对已有 export 语句的模块显得多余。

方案 2:通过 export 语句判断

对于不需要导出的模块,使用 export {} 标记:

// 没有实际导出,但标记为 ES Module
export {};

优点是大多数模块不需要额外标记,缺点是解析器需要预扫描整个文件寻找 export 语句。TypeScript 就是使用这种方案。

方案 3:引入新语法标记

这些方案在 TC39 都未通过,将来也不太可能引入。

通过外部信息识别

既然无法从代码内容判断,就需要外部信息:

  • Web 平台:通过 <script type="module"> 标明,或在其他 API 中指定,如 new Worker(path, {type: 'module'})
  • Node.js:通过文件扩展名 .mjs 或 package.json 中的 "type": "module" 字段标明

为什么需要完整路径

Node.js 的 CommonJS 模块有复杂的 fallback 机制。对于 require('./my-module'),会依次查找:

  1. my-module 文件(无扩展名)
  2. my-module.js 文件
  3. my-module/index.js 文件

这种机制基于文件系统访问成本低的假设。但在浏览器端,这会导致多次网络请求,成本无法接受。因此浏览器端的 import 语句使用标准 URL,通常包含完整扩展名:

// 浏览器端
import MyModule from './my-module.js';

Node.js 加入 ES Module 时需要考虑与浏览器的一致性,因此也要求完整路径。

浏览器与 Node.js 的差异

浏览器端import "./file.js" 总是将 file.js 作为 ES Module 解析。

Node.js:根据外部信息解析。.js 后缀默认按 CommonJS 解析,除非 package.json 设置了 "type": "module"

{
  "type": "module"
}

此外,浏览器端不能直接使用裸名字导入:

// 需要通过 import maps 定义
import "my-module"; // 不能直接使用

Node.js 虽然支持裸名字导入,但也加入了类似 import maps 的机制。

关键点

  • TC39 无法从语法上区分 ES Module 和传统 Script,需要外部信息(扩展名或配置)来标识
  • 浏览器端 import 使用标准 URL,避免多次网络请求,Node.js 为保持一致性也要求完整路径
  • Web 平台通过 <script type="module"> 标识,Node.js 通过 .mjs 扩展名或 package.json 的 "type": "module" 标识
  • Node.js 中 .js 文件默认按 CommonJS 解析,除非明确指定为 module 类型