多次导入 ES6 模块？答案

【问题标题】：ES6 modules imported more than once?多次导入 ES6 模块？
【发布时间】：2020-09-23 18:54:06
【问题描述】：

我正在努力理解浏览器究竟是如何处理 ES6 模块的。我想，这些模块只会在第一次导入时执行（[modules: javascript.info][1].

假设我有以下项目结构：

js
  admin.js
  customers.js
  index.js 
customers.html 
index.html

index.js 和 customers.js 都导入相同的模块 admin.js。当我在index.html 中导入index.js 时，admin 的名称从“John”更改为“Pete”并按预期记录。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modules</title>
  </head>
  <body>
    <nav><a href="customers.html">Customers</a></nav>
    <h1>Homepage</h1>
    <script type="module" src="js/index.js"></script>
  </body>
</html>

在customers.html 中，我希望管理员的名字也是“Pete”：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Customers</title>
  </head>
  <body>
    <nav><a href="index.html">Home</a></nav>
    <h1>Customers</h1>
    <script type="module" src="js/customers.js"></script>
  </body>
</html>

但不是“Pete”，而是“John”再次被记录。

我使用的模块：

// admin.js

export let admin = {
  name: "John",
};

//index.js

import { admin } from "./admin.js";
admin.name = "Pete";

console.log(admin.name); // Pete


// customers.js

import { admin } from "./admin.js";

console.log(admin.name); // Pete

[1]:https://javascript.info/modules-intro#a-module-code-is-evaluated-only-the-first-time-when-imported)

【问题讨论】：

“只会在它们第一次导入时执行”在同一页面上（加载）。如果您转到新页面或刷新当前页面，所有 JavaScript 都会重新执行。一直都是这样。
好的，不像node.js，不能在其他模块之间共享一个模块？
不，有可能。但是打开一个新页面或重新加载页面就像退出节点应用程序并重新启动它（或启动一个单独的节点进程）。每个页面（加载）都是一个单独的环境。如果您要运行node index.js，然后运行node customers.js，您会看到相同的结果。

标签： javascript ecmascript-6 module

【解决方案1】：

正如 Felix 上面所说，每个页面渲染/重新渲染都会重新加载所有资产。这是单页应用程序和多页应用程序之间的区别。您正在使用 MPA，因此您需要在页面之间进行某种形式的数据持久性，例如在数据服务器端建立数据库并在每次页面加载时请求它，或者将必要的持久化数据放置在 localStorage 或 @987654322 之类的东西中@ 用于页面之间的访问。

【讨论】：