詳解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。

參考文獻 ：

• https://www.jianshu.com/p/27ee06296bcd

• https://juejin.im/post/5a2e5f0851882575d42f5609

推薦教程：《JS教程》