ES6和CommonJS语法区别

ES6之前写过写博客时写过如何导入导出，为了更CommonJs做一个横向对比，决定再写一篇。

ES6

一部分浏览器不认识ES6，所以需要babel转ES5，又因为ES5有require()，需要browserify编译

导出

export

export导出时是一个对象，接收时也使用一个对象接收

//test.js
//直接导出
export var name = "test"
export function test1(){}
export class class1{}

//先定义后导出
var name = "test"
function test1(){}
class class1{}
export{name,test1,class1}
1
2
3
4
5
6
7
8
9
10
11

export default

export default导出时作为模块，接收时用一个变量接收，并且当成一个模块使用

//test2.js
//导出函数（整个模块是一个函数）
export default function (){...}

//test3.js
//导出对象（整个模块是对象）
export default {
    var name = "test"
    function test1(){}
    class class1{}      
}
1
2
3
4
5
6
7
8
9
10
11

注意：

• export default 只能使用一次，export可以使用多次
• export 和 export default 能一起使用。
• export 导出一定要指定对外接口（导入时要跟导出变量同名，导出对象和导入对象变量一一对应）
• export default 不需要指定对外接口（作为一整个模块导出，导入时名字可以自定义）

导入

//对应直接导出和先定义后导出的方式（export方式）,使用对象接收
import{name，test1，class1} from './test.js'
test1()


//对应export default方式
import f from './test2.js'
f()//因为导出的模块是一个函数，所以可以直接调用

import model from './test3.js'
model.f()//导出的模块是一个对象，使用时要model.xxx
1
2
3
4
5
6
7
8
9
10
11

CommonJS

导出

module.exports

导出的是exports这一属性

//test.js
//导出是一个函数
module.exports = function(){}

//test2.js
//导出是一个对象
module.exports = {
    name:'xxx'，
    test(){}
}

1
2
3
4
5
6
7
8
9
10
11

exports

通过给exports这个对象里面的变量赋值导出

//test3.js,给exports这个对象的属性逐个赋值，效果等同test2.js
exports.name = "xxx";
exports.test = function(){}
1
2
3

导入

CommonJS使用require进行导入，浏览器不认识，需要browserify编译转换

require

//导入test.js，test这个模块的exports是一个function
const func = require('test.js')
func()

//导入test2.js，test2这个模块的exports是一个{对象}
const model = require('test2.js')
model.test()

//导入test3.js,test2这个模块的exports是一个{对象}
const model = require('test3.js')
model.test()
1
2
3
4
5
6
7
8
9
10
11