关于JavaScript、TypeScript Module的配置和用法
文章目录1、 CommonJS到ES的历史原因2、[package.json 的type字段](https://nodejs.org/api/packages.html#type)3、[tsconfig.json 的compilerOptions.module](https://www.typescriptlang.org/tsconfig/#module)4、示例ES6编译成不同模块的输出的js代码tsconfig.json 的compilerOptions.module设置为 `"module": "es6"`,上述代码生成的js代码设置为 `"module": "commonjs"`,上述代码生成的js代码CommonJS编译成不同模块的输出的js代码tsconfig.json 的compilerOptions.module设置为 `"module": "es6"` 和 `"module": "commonjs"`,上述ts代码生成的js代码是一样的1、 CommonJS到ES的历史原因JavaScript模块系统的发展历史,主要是为了解决代码组织、复用和依赖管理的问题,尤其是在语言本身最初缺乏内置模块机制的情况下。早期 (无模块系统)最初,JavaScript主要用于浏览器中的简单脚本,代码通常写在单个文件或通过多个script标签引入。这导致了全局命名空间污染、代码难以维护和复用等问题。CommonJS (CJS) 的出现背景: Node.js 的诞生 (2009年) 需要一种在服务器端组织和管理代码的方式。浏览器端的同步加载不是问题,因为文件都在本地。主要特点:使用require()同步加载模块。通过module.exports或exports导出模块内容。每个文件是一个模块,拥有自己的作用域。原因:服务器端需求: Node.js 需要一种强大的模块化方案来构建大型应用。同步加载可行性: 在服务器端,模块文件通常在本地磁盘,同步加载性能影响较小。影响: CommonJS 成为 Node.js 社区事实上的标准,极大地促进了 Node.js 生态的发展。AMD (Asynchronous Module Definition) 的出现背景: CommonJS 的同步加载机制不适合浏览器环境。在浏览器中,脚本通常需要从网络异步加载,同步加载会阻塞页面渲染。主要特点:使用define()函数定义模块,并明确声明依赖。依赖的模块会被异步加载,加载完成后执行回调。代表库: RequireJS。原因:浏览器异步需求: 解决浏览器中脚本加载的阻塞问题。依赖前置: 需要在使用模块前声明所有依赖。UMD (Universal Module Definition)背景: 为了让同一个模块代码能同时在 CommonJS (如Node.js) 和 AMD (如浏览器) 环境下运行,UMD 模式应运而生。主要特点: UMD 本质上是一个立即执行函数,它通过判断当前环境支持哪种模块规范 (CommonJS, AMD, 或全局变量) 来决定如何导出模块。原因:代码复用: 提高库的通用性,使其能在不同环境中使用。ES Modules (ESM) 的出现 (官方标准)背景: JavaScript 语言本身需要一个统一的、官方的模块化标准,以结束各种社区方案并存的局面,并更好地支持静态分析。主要特点:使用import关键字导入模块,export关键字导出模块。可以使用require静态结构:import和export必须在模块的顶层,不能在条件语句或函数中。这使得编译时就能确定模块的依赖关系。异步加载: 设计上支持异步加载,对浏览器友好。Tree Shaking: 静态结构使得打包工具(如Webpack, Rollup)可以进行 Tree Shaking,移除未使用的代码,减小打包体积。浏览器和现代 Node.js 版本原生支持。原因:语言标准化: TC39 (JavaScript 的标准制定委员会) 推动了 ESM 作为官方标准。静态分析和优化: 静态结构便于工具进行代码分析、优化(如 Tree Shaking)和错误检查。浏览器和服务器统一: 提供一个在浏览器和服务器端都能良好工作的统一模块系统。更好的开发体验: 语法更简洁、更符合现代编程习惯。发展原因总结:代码组织和复用: 最根本的需求是更好地组织和复用代码,避免全局污染。环境差异: 服务器端 (Node.js) 和浏览器端对模块加载方式 (同步 vs. 异步) 的不同需求催生了 CommonJS 和 AMD。统一性需求: 社区中多种模块方案并存导致了混乱,需要一个官方标准来统一。性能和工具链优化: 对静态分析、Tree Shaking 等优化的需求推动了 ESM 的设计。语言现代化: 作为一门现代编程语言,拥有内置的模块系统是其发展的必然趋势。目前,ES Modules 是 JavaScript 官方推荐和未来的标准模块系统,虽然 CommonJS 仍然在 Node.js 生态中有大量存量代码,但新的项目和库越来越倾向于使用 ESM。Node.js 也通过package.json中的"type": "module"字段以及.mjs和.cjs文件扩展名来支持 ESM 和 CJS 的共存与互操作。2、package.json 的type字段{"name":"module-test","version":

相关新闻

Python argparse 实战:用子命令、互斥参数和类型校验写一个像样的 CLI

Python argparse 实战:用子命令、互斥参数和类型校验写一个像样的 CLI

Python argparse 实战:用子命令、互斥参数和类型校验写一个像样的 CLI 写脚本时你多半这么读命令行参数:sys.argv[1] 拿第一个,sys.argv[2] 拿第二个。脚本小的时候没问题,一旦参数多起来、有可选项、有默认值,这套就崩了——参数顺序一错全乱,少传一个直接 IndexError,想加个 …

2026/8/2 20:09:08阅读更多 →
房地产项目三维建筑漫游动画:让客户“走进”未来的家

房地产项目三维建筑漫游动画:让客户“走进”未来的家

一、什么是房地产建筑漫游动画?房地产建筑漫游动画是将“虚拟现实”技术应用于楼盘展示的三维可视化表现形式。它把建筑设计师徒手勾画出的建筑方案、立面、剖面、透视图变成逼真的虚拟楼盘,让客户可随心所欲地漫游其中。与普通视频不同,建筑…

2026/8/2 20:09:08阅读更多 →
Unity Input System消息传递机制详解:Send Messages、Unity Events与C# Events性能对比与选型指南

Unity Input System消息传递机制详解:Send Messages、Unity Events与C# Events性能对比与选型指南

1. 项目概述:为什么PlayerInput的消息传递值得深究? 在Unity的新版Input System中, PlayerInput 组件无疑是一个“明星”组件。它被设计为快速集成玩家输入逻辑的入口,官方文档和许多教程都会告诉你:拖上去&#xff…

2026/8/2 20:09:08阅读更多 →
Modbus RTU智能继电器模块:从原理到工业自动化应用实战

Modbus RTU智能继电器模块:从原理到工业自动化应用实战

1. 项目概述:从“继电器”到“工业节点”的蜕变如果你在工业自动化、楼宇自控或者智能农业领域摸爬滚打过,一定对“继电器”这个老朋友不陌生。它就像一个听话的开关,用一个小电流去控制一个大电流的通断,驱动电机、点亮灯光、启动…

2026/8/2 21:23:38阅读更多 →
NetherSX2-patch终极指南:如何优化你的PS2模拟器体验

NetherSX2-patch终极指南:如何优化你的PS2模拟器体验

NetherSX2-patch终极指南:如何优化你的PS2模拟器体验 【免费下载链接】NetherSX2-patch Continuation of NetherSX2 based on AetherSX2 4248 项目地址: https://gitcode.com/gh_mirrors/ne/NetherSX2-patch NetherSX2-patch是一个基于AetherSX2 4248版本的开…

2026/8/2 21:23:38阅读更多 →
深入C++对象内存布局:从虚函数表到多重继承的底层实现

深入C++对象内存布局:从虚函数表到多重继承的底层实现

1. 项目概述:从内存视角看透C继承与多态在C的面试和实际项目开发中,继承和多态是绕不开的核心话题。很多开发者能熟练写出virtual关键字,能说出“运行时绑定”的定义,但一旦被问到“一个包含虚函数的类对象在内存中占多少字节&…

2026/8/2 21:23:38阅读更多 →
3步掌握Cpp2IL:解锁Unity IL2CPP逆向工程的实用指南

3步掌握Cpp2IL:解锁Unity IL2CPP逆向工程的实用指南

3步掌握Cpp2IL:解锁Unity IL2CPP逆向工程的实用指南 【免费下载链接】Cpp2IL Work-in-progress tool to reverse unitys IL2CPP toolchain. 项目地址: https://gitcode.com/gh_mirrors/cp/Cpp2IL Cpp2IL是一个强大的开源工具,专门用于将Unity IL2…

2026/8/2 21:23:38阅读更多 →
终极A2UI架构解析:打造下一代AI驱动的动态界面系统

终极A2UI架构解析:打造下一代AI驱动的动态界面系统

终极A2UI架构解析:打造下一代AI驱动的动态界面系统 【免费下载链接】a2ui 项目地址: https://gitcode.com/GitHub_Trending/a2/a2ui A2UI(Agent-to-User Interface)是一个革命性的AI界面框架,它通过将大型语言模型的推理能…

2026/8/2 21:23:38阅读更多 →
嵌入式GUI开发实战:LVGL移植、优化与FreeRTOS集成指南

嵌入式GUI开发实战:LVGL移植、优化与FreeRTOS集成指南

1. 项目概述:为什么LVGL是嵌入式GUI开发的“瑞士军刀”?如果你正在开发一个带屏幕的嵌入式设备,无论是智能手表、工业HMI面板,还是家用电器,大概率都绕不开一个名字:LVGL。它不是某个大厂的专属产品&#x…

2026/8/2 21:21:36阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/2 0:00:10阅读更多 →
限时公开!某头部SaaS公司内部AI模板工厂架构文档(含5类行业模板源码+性能压测报告)

限时公开!某头部SaaS公司内部AI模板工厂架构文档(含5类行业模板源码+性能压测报告)

更多请点击: https://intelliparadigm.com 第一章:AI模板批量生成的核心价值与落地全景 AI模板批量生成正从实验性工具演进为现代软件工程的关键基础设施。它通过语义理解、上下文感知与结构化约束,将重复性高、模式明确的代码/文档/配置生成…

2026/8/2 0:00:12阅读更多 →
如何快速找回消失的网页:Web Archives浏览器扩展终极指南

如何快速找回消失的网页:Web Archives浏览器扩展终极指南

如何快速找回消失的网页:Web Archives浏览器扩展终极指南 【免费下载链接】web-archives Browser extension for viewing archived and cached versions of web pages, available for Chrome, Edge and Safari 项目地址: https://gitcode.com/gh_mirrors/we/web-a…

2026/8/2 0:00:13阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/2 0:00:10阅读更多 →
限时公开!某头部SaaS公司内部AI模板工厂架构文档(含5类行业模板源码+性能压测报告)

限时公开!某头部SaaS公司内部AI模板工厂架构文档(含5类行业模板源码+性能压测报告)

更多请点击: https://intelliparadigm.com 第一章:AI模板批量生成的核心价值与落地全景 AI模板批量生成正从实验性工具演进为现代软件工程的关键基础设施。它通过语义理解、上下文感知与结构化约束,将重复性高、模式明确的代码/文档/配置生成…

2026/8/2 0:00:12阅读更多 →
如何快速找回消失的网页:Web Archives浏览器扩展终极指南

如何快速找回消失的网页:Web Archives浏览器扩展终极指南

如何快速找回消失的网页:Web Archives浏览器扩展终极指南 【免费下载链接】web-archives Browser extension for viewing archived and cached versions of web pages, available for Chrome, Edge and Safari 项目地址: https://gitcode.com/gh_mirrors/we/web-a…

2026/8/2 0:00:13阅读更多 →
无损视频剪辑终极指南:如何实现快速高效的多媒体处理

无损视频剪辑终极指南:如何实现快速高效的多媒体处理

无损视频剪辑终极指南:如何实现快速高效的多媒体处理 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 在数字媒体创作领域,视频编辑处理的质量损…

2026/8/2 1:29:34阅读更多 →
AI辅助本科论文写作:8大工具评测与高效使用指南

AI辅助本科论文写作:8大工具评测与高效使用指南

1. 本科生论文写作的AI辅助现状本科毕业论文是每个大学生必须跨越的一道坎。记得我当年写论文时,光是文献检索就花了整整两周时间,打印的参考文献堆满了半个书桌。如今AI技术的发展为学术写作带来了革命性变化,合理使用这些工具可以节省80%以…

2026/8/2 2:32:55阅读更多 →
如何快速配置大麦自动抢票系统:从零开始搭建Python抢票助手

如何快速配置大麦自动抢票系统:从零开始搭建Python抢票助手

如何快速配置大麦自动抢票系统:从零开始搭建Python抢票助手 【免费下载链接】ticket-purchase 大麦自动抢票,支持人员、城市、日期场次、价格选择 项目地址: https://gitcode.com/GitHub_Trending/ti/ticket-purchase 还在为抢不到热门演唱会门票…

2026/8/2 2:09:20阅读更多 →