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'];

 

posted @ 2020-04-20 12:08  白树  阅读(229)  评论(0编辑  收藏