commonJs规范，ES6规范 exports require import 使用-蒲公英云

commonJs规范，ES6规范 exports require import 使用

小鱼儿 2022-10-15 13:59 400阅读 0赞

commonJs规范，ES6规范 exports require import 使用

ES6模块运行机制完全不一样，JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行的时候，再根据这个只读引用，到被加载的那个模块里去取值。
CommonJS输出的是值的拷贝，换句话说就是，一旦输出了某个值，如果模块内部后续的变化，影响不了外部对这个值的使用。CommonJS其实加载的是一个对象，这个对象只有在脚本运行时才会生成，而且只会生成一次

模块化解决的问题是：
- 加载顺序
- 污染全局
commonJs规范： 
同步加载，引用进来后变成立即执行函数
exports 
module.exports
require()
AMD
异步
CMD
依赖就近 按需加载
ES6规范：
export 
import { xxx } from './components'
export default {}
import xxx from './components'
@import   " "

总结

写到这里，本文也就基本结束了。我们总结一下文中涉及到的内容：

因为CommonJS的require语法是同步的，所以就导致了CommonJS模块规范只适合用在服务端，而ES6模块无论是在浏览器端还是服务端都是可以使用的，但是在服务端中，还需要遵循一些特殊的规则才能使用；
CommonJS 模块输出的是一个值的拷贝，而ES6 模块输出的是值的引用；
CommonJS 模块是运行时加载，而ES6 模块是编译时输出接口，使得对JS的模块进行静态分析成为了可能；
因为两个模块加载机制的不同，所以在对待循环加载的时候，它们会有不同的表现。
CommonJS遇到循环依赖的时候，只会输出已经执行的部分，后续的输出或者变化，是不会影响已经输出的变量。而ES6模块相反，使用import加载一个变量，变量不会被缓存，真正取值的时候就能取到最终的值；
关于模块顶层的this指向问题，在CommonJS顶层，this指向当前模块；而在ES6模块中，this指向undefined；
关于两个模块互相引用的问题，在ES6模块当中，是支持加载CommonJS模块的。但是反过来，CommonJS并不能requireES6模块，在NodeJS中，两种模块方案是分开处理的。