es6模块和 commonjs模块

发布时间:2022-06-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6模块和 commonjs模块脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

es6模块(ESM) 和 commonjs(CJS)模块的区别

  1. ESM输出的是值的引用;CJS输出的是值的拷贝

  2. ESM是编译时执行;CJS总是在运行时加载

  3. ESM是异步加载;CJS是同步加载

  4. ESM是es6的模块体系;CJS是nodejs中的,主要用于服务端

  5. ESM => babel => browserify => 浏览器识别的语法;CJS => browserify => 浏览器识别的语法

 1 function add() {
 2     console.log("commjs暴露");
 3 }
 4 function sum() {
 5     console.log("加法");
 6 }
 7 
 8 
 9 --------------------------------Commonjs--------------------------------
10 // 暴露的是一个对象,对象中有一个add方法
11 module.exports.add = add    // 需要解构
12 const {add} = require('./add.js');
13 
14 
15 // 直接将add暴露出去
16 module.exports = add     // 直接使用
17 // 暴露多个
18 module.exports = { add, sum }
19 const add = require('./add.js');
20 
21 
22 // 暴露的是一个对象,里面有一个add方法。export默认指向module.exports对象
23 exports.add = add       // 需要解构
24 const {add} = require('./add.js');
25 
26 
27 
28 --------------------------------es6--------------------------------
29 // 分别暴露
30 export let count = 0    // 需要解构
31 export function calc(){}
32 
33 
34 // 统一暴露,
35 export { add, sum }     // 需要解构
36 import { add, sum } from './add.js'
37 
38 
39 // 默认暴露
40 export default add  // 直接使用
41 import add from './add.js'

 

脚本宝典总结

以上是脚本宝典为你收集整理的es6模块和 commonjs模块全部内容,希望文章能够帮你解决es6模块和 commonjs模块所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: