了解使用ES6模块执行代码

Question

问题在底部提到

我在React生产版本中使用Webpack已经有一段时间了。

我对ES6模块感兴趣，关于代码分离和执行。

所以我想出了以下测试代码来理解模块的行为。

代码放在src文件夹中。 Webpack将代码捆绑在一起，然后bundle.js与node ./dist/bundle.js一起在期刊中运行

代码：

./ SRC / index.js

import node1 from "./node1";   
import node2 from "./node2";

function part() {
  node1();
  node2();
}

part();

./ SRC / node1.js

import test, { x } from "./test";

function node1() {
  console.log("node1", x, new Date().getTime());
  test();
  console.log("node1", x, new Date().getTime());
}

export default node1;

./ SRC / node2.js

import test, { x } from "./test";

function node2() {
  console.log("node2", x, new Date().getTime());
  test();
  console.log("node2", x, new Date().getTime());
}

export default node2;

./ SRC / test.js

let x = 1;
console.log(x, new Date().getTime());

function test() {
 console.log(
  "This is test for understanding dependency graph",
  x++,
  new Date().getTime()
 );
}

export default test;

export { x };

执行结果

问题：我希望x的导出值保持不变。为什么是  不是吗？

问题：由于webpack捆绑或ES6模块import\export规范的更多固有部分，是否在运行时显示了行为？

Answer 1

1. 在ES6模块中，导出值不是实际值，而是不可变绑定。 x中的简单放置node1.j是对x
中test.js的不可变引用
2. 由ES6模块设计

您可以在此处阅读更多内容：http://2ality.com/2015/07/es6-module-exports.html