require一个node模块什么时候需要加上.default

Posted 2020-11-27 白色橡树

最近项目开发中，在代码中看到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‘];