JavaScript导入文件时为何显示导出文件的控制台输出？是否正常及如何避免？

现象说明 #

你遇到的情况是完全正常的，这是ES模块的标准行为。

当你通过import语法导入另一个模块的变量时，JavaScript运行时会完整执行整个导出模块的顶级代码——也就是说，second.js里所有不在函数/类内部的代码（包括那个console.log("A try...")）都会在首次被导入时执行一遍。模块只会被加载执行一次，但只要有其他模块导入它，其顶级逻辑就会先运行。

你的代码示例 #

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="/first.js" type="module"></script>
  </body>
</html>

first.js

import { a } from "./second.js";
console.log(a);

second.js

export let a = "Hello";
console.log("A try...");

阻止导出文件控制台输出的方法 #

最直接且通用的方案是把非导出相关的逻辑封装到函数中，只在需要主动调用时才执行：

修改second.js：

export let a = "Hello";

// 将控制台输出逻辑封装为函数，仅主动调用时执行
export function logMessage() {
  console.log("A try...");
}

这样只有当你在first.js中调用logMessage()时，才会输出这条日志；单纯导入a变量时，不会触发该控制台输出。

如果是Node.js环境，还可以通过判断require.main === module来区分模块是被直接执行还是被导入，但这个方法在浏览器ES模块环境中不适用，因此优先推荐上面的封装函数方案。

内容的提问来源于stack exchange，提问作者Carasidelt