ES6 模塊化與 CommonJS 模塊化區別

ES6 模塊化與 CommonJS 模塊化區別

在最近的項目中關於 ES6 的 import、export 和 CommonJS 中的 module.exports、require 的使用傻傻搞不清楚，今天下定決心總結一下，有什麼不對的地方，還請諸位多多指教。

ES6 模塊化

import命令用於輸入其餘模塊提供的功能;export命令用於規定模塊的對外接口。

1、 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'

2、 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 模塊化

1、 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。

參考文獻 ：

1. https://www.jianshu.com/p/27e...
2. https://juejin.im/post/5a2e5f...