es6 混合commjs_ES6 模块化与 CommonJS 模块化区别

ES6 模块化与 CommonJS 模块化区别

在最近的项目中关于 ES6 的 import、export 和 CommonJS 中的 module.exports、require 的使用傻傻搞不清楚，今天下定决心总结一下，有什么不对的地方，还请诸位多多指教。

ES6 模块化

import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。

一、 import 与 export

// 导出 a.js

/** 写法一 **/

var name = 'sheep'

function getSheep() {

name = 'hourse'

}

export {getSheep}

// 引入 b.js

import {getSheep} from '.／a.js'

/** 写法二 **/

var name = 'sheep'

export function getSheep() {

name = 'hourse'

}

// 引入 b.js

import {getSheep} from '.／a.js'

二、 import 与 export defalut

export 可以有多个，export default 仅有一个

// 导出 a.js

let obj = {

name: 'hello',

getName: function (){

return this.name

}

export default obj

// 引入 b.js

import obj from './a.js'

CommonJS 模块化

一、 require 与 module.exports

require 在 ES6(bable将import转化为require) 和 CommonJS 中都支持

// 导出 a.js

let obj = {

name: 'hello',

getName: function (){

return this.name

}

module.exports = obj

// 引入 b.js

let obj = require('./a.js')

总结

即使我们使用了 ES6 的模块系统，如果借助 Babel 的转换，ES6 的模块系统最终还是会转换成 CommonJS 的规范。

Babel5 中使用 require 时，引入值是 module.export 返回的值或者是 export default 返回的值。

Babel6中，使用 import 引入时，可以直接获取到 export default 的值 ； 但是如果是 require 导入的组件， 无论导出是 module.export 、export 、 export default可以直接获取到 export default 的值都必须要加上一个 default。

参考文献 ：