Node模块引入 Babel
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
所以使用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'