组件库 引入模式 amd、commonjs、umd、esm

https://juejin.im/post/6844903978333896718

https://segmentfault.com/a/1190000020093455

https://zhuanlan.zhihu.com/p/54290649

 

UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的

ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包

现代浏览器中通过 <script type="module"> 直接导入

 

历史上，js一直没有模块(module)体系，无法将一个项目拆分成多个模块文件。正对这一情况，社区出现了一些统一的规范：CommonJs和AMD，前者是针对服务端的js，也就是nodejs。后者是针对浏览器的 

以前的js不能引入三方模块，所有的代码必须写到一个文件中，导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码，有助于使您的代码变得松散耦合，这对于构建可维护的表示工程代码大有帮助。基于此，越来越多的模块规范出现，如commonjs、amd、umd、esm

 

一些类库均有lib,es文件夹用来表示commonjs写法和es6写法,我们可以用babel直接转码生成.

 

 

AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS

 

CMD是SeaJS在推广过程中生产的对模块定义的规范

 

CommonJS规范为CommonJS小组所提出，目的是弥补JavaScript在服务器端缺少模块化机制，NodeJS、webpack都是基于该规范来实现的。

 

ES6 Module是ES6中规定的模块体系，相比上面提到的规范， ES6 Module有更多的优势，有望成为浏览器和服务器通用的模块解决方案。

 

umd

其是amd和commonjs的统一规范，支持两种规范，即写一套代码，可用于多种场景

 

ESM

ESM是ES6提出的标准模块系统，相信大家都用过

 

node支持ESModule

//node最新版本进一步增强了对ESModule的支出，只需要在package.json增加一个选项即可 "type":"module"