javascript - 关于ES6模块的动态引用的问题

问题描述

问 题

我在module.js输出接口，在main.js中引入

// module.js
export default function foo () {
  console.log('huuuuuu')
}
foo = function () {
  console.log('huahua')
}

// main.js
import foo from './module.js';
foo() // 'huahua'

执行结果输出huahua

---

现在我将module.js修改成

function foo () {
  console.log('huuuuuu')
}
export default foo
foo = function () {
  console.log('huahua')
}

执行结果输出huuuuuu

ES6模块的接口与其对应的值不是动态绑定的？下面的修改并没有引起动态改变？

解决方案

我看了一下两者对应的 babel 编译结果：

第一种：http://babeljs.io/repl/#?babi...

ES6 源码：

export default function foo () {
  console.log('huuuuuu')
}
foo = function () {
  console.log('huahua')
}

编译结果为：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = foo;
function foo() {
  console.log('huuuuuu');
}
exports.default = foo = function foo() {
  console.log('huahua');
};

第二种写法，编译结果为

http://babeljs.io/repl/#?babi...

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
function foo() {
  console.log('huuuuuu');
}
exports.default = foo;

foo = function foo() {
  console.log('huahua');
};

关于这个问题，已经有对应的 issue 讨论了：https://github.com/babel/babe...

export default test;

会被解析为：

const _tmp = test;
export {_tmp as default};

这篇关于javascript - 关于ES6模块的动态引用的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！