es6和commonJs的区别

Posted 2023-04-03 conquer_galaxy

一、export语句的区别：

ES6 和 CommonJS 是两种不同的 javascript 模块化规范，它们的 export 语句有一些区别：

1. export 关键字：在 ES6 中，使用 export 关键字来导出模块中的变量、函数、类等；而在 CommonJS 中，使用 module.exports 来导出模块。

2. 导出方式：ES6 的 export 语句可以直接导出变量、函数、类等，如：

   // ES6
   export const name = 'Alice';
   export function greet() 
     console.log('Hello!');
   
   
   // CommonJS
   module.exports = 
     name: 'Alice',
     greet: function() 
       console.log('Hello!');
     
   ;
   

3. 多次导出：在 ES6 中，一个模块可以有多个 export 语句，而在 CommonJS 中，只能使用一次 module.exports 导出整个模块，不能分别导出多个变量或函数。

4. 导入方式：在 ES6 中，使用 import 关键字导入其他模块的变量、函数、类等；而在 CommonJS 中，使用 require() 函数导入其他模块。

总的来说，ES6 的 export 语句提供了更加方便、灵活的导出方式，适合于浏览器端和 Node.js 中使用；而 CommonJS 的 module.exports 导出方式则更适合于 Node.js 文件模块中使用。

 

下面我会分别举例说明 ES6 和 CommonJS 的不同点。

1. 语法不同：

ES6使用import和export关键字来实现模块化，示例如下：

// app.js
import  add  from './math.js';
console.log(add(1, 2));

// math.js
export function add(x, y) 
  return x + y;

CommonJS使用require()和module.exports实现模块化，示例如下：

// app.js
const math = require('./math.js');
console.log(math.add(1, 2));

// math.js
module.exports = 
  add: function(x, y) 
    return x + y;
  
;

2. 加载方式不同：

ES6是静态加载，编译时就处理了模块依赖关系，示例如下：

// app.js
import  add  from './math.js'
console.log(add(1, 2))

// math.js
export function add(x, y) 
  return x + y

3. CommonJS是动态加载，运行时才处理模块依赖关系，示例如下：

// app.js
const math = require('./math.js')
console.log(math.add(1, 2))

// math.js
module.exports = 
  add: function(x, y) 
    return x + y
  

3.应用场景不同：

ES6适用于浏览器端和Node.js中使用，示例如下：

// app.js
import  add  from './math.js'
console.log(add(1, 2))

// math.js
export function add(x, y) 
  return x + y

4. CommonJS适用于服务器端，示例如下：

// app.js
const math = require('./math.js')
console.log(math.add(1, 2))

// math.js
module.exports = 
  add: function(x, y) 
    return x + y
  

4.对象引用不同：

ES6的模块导入通过对象引用来实现，示例如下：

// utils.js
export let count = 0;

export function increment() 
  count++;


// app.js
import  count, increment  from './utils.js';

console.log(count); // 0
increment();
console.log(count); // 1

CommonJS的模块导入则是通过值拷贝的方式来实现，示例如下：

// utils.js
var count = 0;

function increment() 
  count++;


module.exports = 
  count: count,
  increment: increment
;

// app.js
var utils = require('./utils.js');

console.log(utils.count); // 0
utils.increment();
console.log(utils.count); // 0

5. 循环依赖处理不同：

ES6在编译时会进行循环依赖处理，示例如下：

// a.js
import  b  from './b.js'

export const a = 'a'

console.log(a, b)

// b.js
import  a  from './a.js'

export const b = 'b'

console.log(a, b)

CommonJS无法处理循环依赖，示例如下：

// a.js
exports.a = 'a';
const  b  = require('./b.js');
console.log(a, b);

// b.js
exports.b = 'b';
const  a  = require('./a.js');
console.log(a, b);

以上是 ES6 和 CommonJS 的一些区别，不同点的具体表现形式还可能有其他的方式。在实际应用中，可以根据具体情况选择使用不同的模块化方案。

总结：

ES6 和 CommonJS 都是 JavaScript 模块化的规范，它们之间有以下区别：

1. 语法不同：ES6 使用 import 和 export 关键字来实现模块化，而 CommonJS 使用 require() 和 module.exports。

2. 加载方式不同：ES6 使用静态加载，即在编译时就处理模块依赖关系；而 CommonJS 使用动态加载，即在运行时处理模块依赖关系。

3. 应用场景不同：ES6 的模块化适用于浏览器端和 Node.js 中使用，它采用了异步导入、编译时静态分析等技术，使得代码可读性更好，依赖关系更清晰，能够有效提高代码执行效率。而 CommonJS 则更适合于服务器端，因为 Node.js 中使用的大部分第三方模块都是基于 CommonJS 规范的。

4. 对象引用不同：ES6 的模块导入是通过对象引用来实现的，即所有导入的变量都指向同一个引用；而 CommonJS 的模块导入则是通过值拷贝的方式来实现的，即每个变量都拷贝了一份导出变量的值。这意味着如果在 ES6 的模块中修改导出变量的属性，那么其他导入该变量的模块也会受到影响，而在 CommonJS 中则不会。

5. 循环依赖处理不同：ES6 在编译时会进行循环依赖处理，即将模块中的循环依赖转换成静态的拓扑结构；而 CommonJS 则无法处理循环依赖。

总的来说，ES6的模块化规范更加先进、灵活，能够适应更多的应用场景，而CommonJS则更加简单、易用，广泛应用于Node.js开发中。在实际应用中，可以根据具体情况选择使用不同的模块化方案。

ES6模块和commonjs模块的区别

1. commonjs模块输出的是值的浅拷贝，ES6模块输出的是值的引用 (也就是说，cmmonjs模块输出后被改变，其他引用模块不会改变，而ES6模块会改变)

2. commonjs模块是运行时加载，而ES6模块是编译时输出接口，之所以webpack的tree-shaking只能作用于ES6模块，就是因为ES6模块在编译时就能确定依赖