module.exports和export的区别
有些写法是
module.exports = ...
或者 export default ...
这两者有什么区别
转义
在webpack+babel编译后,两种写法分别会变为
//转变前后无变化
module.exports = ...
//而export default会转变成
exports.default = ...
//同效于
module.exports.default = ...
不同
这样其实大多数情况也差不多
但是循环依赖就不一样了
假如 index -> b -> c
b <- c
以下是module.exports b文件
var _c = __webpack_require__(9);
var _c2 = _interopRequireDefault(_c);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var b = {
a: function a() {
console.log('调用1');
_c2.default.a();
}
};
//如果是module.exports
module.exports = b;
//如果是export default
exports.default = b;
c文件
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _b = __webpack_require__(8);
var _b2 = _interopRequireDefault(_b);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var c = {
a: function a() {
console.log('调用');
_b2.default.a();
}
};
//如果是module.exports
module.exports = c;
//如果是export default
exports.default = b;
如果是module.exports的方式
在c引入b时候
var _b = __webpack_require__(8);
就会把b当时的exports空对象给引过来
而后面当c加载完,到b加载的时候
b的module.exports = b是不会去关联到c文件去的
因为整个module.exports都被换掉了!!!(重点)
b中如果是export default 会转化成 export.default = b
此时c中引用的是b的module.exports,而此时是多了个属性,索引关联还是在的,没有去掉,所以就有了c文件自动再用到 b时,就能找到b刚export default的东西