JavaScript与TypeScript中两种模块导入导出方式适用场景咨询

模块规范适用场景说明 #

你提到的两种写法是不同的JavaScript模块化规范，并不和JavaScript/TypeScript严格绑定，两种语言都支持这两种规范，具体适用场景区别如下：

1. require / exports （CommonJS规范） #

这是Node.js早期推出的社区模块化标准，适用场景：

• 低版本Node.js（v12.17以下）环境：该版本区间Node.js对官方ES规范的模块支持不完善，默认只能用CommonJS
• Node.js默认环境：如果项目package.json中没有配置"type": "module"，所有.js文件默认按CommonJS解析，直接使用该写法即可
• 老版本前端工程化项目：Webpack 4及更早的未升级ESM支持的老项目，也可使用该写法
• TypeScript也支持该规范：只要在tsconfig.json中配置"module": "CommonJS"，TS编译后就会输出CommonJS格式的代码，适合需要兼容低版本Node.js的TS项目

2. import / export （ES Module/ESM规范） #

这是ECMAScript官方推出的标准化模块化方案，也是目前的主流选择，适用场景：

• 所有现代前端项目：React/Vue/Angular等主流框架的官方脚手架默认都采用ESM规范，是前端开发的首选写法
• 原生浏览器环境：浏览器原生支持ESM，只要给script标签添加type="module"属性，就可以直接运行ESM语法的JS代码
• 高版本Node.js（v12.17+）环境：只要在package.json中配置"type": "module"，Node.js就会默认按ESM解析.js文件
• TypeScript优先推荐：TS对ESM的类型推导支持更完善，大部分TS项目默认都会配置为输出ESM格式代码，是TS开发的首选方案

补充小修正：你示例里的写法有小问题，CommonJS全量导入正确写法是const runtime = require('./runtime')，ESM全量导入正确写法是import * as runtime from './runtime'。

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