JavaScript 最初只是一种简单的语言，用于使静态网站更具活力和交互性。然而，用 JavaScript 编写的项目在很久以前就开始变得越来越复杂。正因为如此，我们很快就发现需要一种方法来将代码分解成更小、更易于管理的片段

自从 JavaScript 项目开始变得越来越复杂以来，已经有很长一段时间了。因此，将代码分割成易于管理的片段变得至关重要。在 JavaScript 开发的历史上，我们经历了许多不同的将代码拆分成模块的方法。

所周知，JavaScript社区喜欢进行热烈的辩论。四年来，我们如何组织代码的问题上一直存在一个分歧——这是一个基本但令人意外地有争议的问题，继续将开发者分开。

我们知道，JavaScript 模块有两种方法来定义导出：默认导出和命名导出。在本节中，我们来看下为什么默认导出是一种糟糕的做法，会导致不好的开发体验。

CommonJS模块(下面简称 cjs) 是为Node.js打包JavaScript代码的原始方法。使用 require 和 exports（module.exports的简写） 语句定义模块。 ECMAScript模块(下面简称 esm)是ecma262标准下封装的JavaScript代码重用的官方标准格式。

随着前端项目越来越庞大，代码复杂性不断增加，对于模块化的需求越来越大。模块化是工程化基础，只有将代码模块化，拆分为合理单元，才具备调度整合的能力。下面就来看看模块化的概念，以及不同模块化方案的使用方式和优缺点。

当 ES Module 最开始作为一种新的 JavaScript 模块化方案在 ES6 中被引入的候，其实是通过在 import 语句中强制指定相对路径或绝对路径来实现的。

当ES模块第一次在ECMAScript 2015中被引入，作为在JavaScript中标准化模块系统的一种方式时，它是通过在import语句中指定相对或绝对路径来实现的。

如果被问到“CommonJS和ES Module的差异”，大概每个前端都都背出几条：一个是导出值的拷贝，一个是导出值的引用；一个是运行时加载，一个是静态编译...

当调用 import(pathToModule) 作为一个函数时，其参数表示一个模块的指定符（又称路径），那么就会动态加载该模块。在这种情况下，module = await import(pathToModule) 返回一个 promise ，该承诺解析为一个包含导入模块组件的对象。

作为前端开发，模块化我们已经耳熟能详，我们平时接触到的 ES6 的 import，nodejs中的require他们有啥区别？我们也听过CommonJS、CMD、AMD、ES6模块系统，这些都有什么联系呢？

如果直接在 TS 里改成 JS 一样的写法，在安装了 @types/react 的情况下，编辑器会抛出一个错误：此模块是使用 export 声明的，在使用 esModuleInterop标志时只能与默认导入一起使用。

模块化程序设计是指在进行程序设计时将一个大程序按照功能划分为若干小程序模块，每个小程序模块完成一个确定的功能，并在这些模块之间建立必要的联系，通过模块的互相协作完成整个功能的程序设计方法。

前端开发中仅在需要时的时候加载 Javascript 模块。这样可以提供很大的性能，比如：您有一个组件，例如复杂的视频播放器，它可以使用大量 js，并且该视频仅在用户单击它时才会启动。那么在这种情况下，用户甚至可能永远不会单击播放按钮，因此仅在需要时才加载该Js模块。

在创建JavaScript模块时，export 用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import使用它们。被导出的绑定值依然可以在本地进行修改。