require一個node模塊什么時候需要加上.default

最近項目開發中，在代碼中看到require('./routes').default，為什么要添加default呢？於是研究了下。

首先看下代碼中的router模塊：

//router模塊
let router = new VueRouter({...})
export default router

在組件或者其它模塊引入router模塊，可以有以下2種方式：

方式1：在index.js中使用ES6的import方法導入方式require引入router模塊

//index.js中導入router.js中的router模塊
import router from './router'

方式2：在index.js中使用CommonJS的模塊導入方式require引入router模塊，則需要使用 .default 來獲取實際的組件選項

//index.js中導入router.js
const router = require('./routes').default;

為什么會出現方式2的情況？

前端代碼上線前如果使用webpack打包編譯的，babel@5及之前的版本可以把export和import轉成node的module.exports和require ，但是babel@6版本開始不再把export default轉成node的module.exports，參考https://github.com/babel/babel/issues/2212，

所以使用babel@6的版本才會出現方式2的情況，比如：

使用Babel@6 編譯下面的模塊

export default 'router'

可得到以下編譯結果，你也可以打開babeljs.io在線編譯試試看

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 'router';

因此，需要require形式引入模塊，需要添加.default

require（ ' ./router.js '） // {默認值：'router'} 
require（ ' ./router.js '）.default// 'router' 

當然你如果不喜歡這種方式，也可以回到babel@5的效果，通過引入babel-plugin-add-module-exports這個plugin可以解決這個問題，以下是編譯效果：

'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = 'router';
module.exports = exports['default'];