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模块化详解)


下一篇:一、模块/包 与 CommonJS