JavaScript中import 'foo'语句的作用是什么？已知两种import用法

嘿，这个问题问得很到位！咱们结合你提到的另外两种导入方式对比着说，就清楚多了：

你已经知道：

• import {x} from 'foo'：从foo模块里精准导入名为x的导出对象，当前模块可以直接使用x；
• import x from 'foo'：你说它等同于const x = require('foo')，其实在ES模块场景下，这是导入foo的默认导出（如果是兼容CommonJS的环境，效果确实和require接近，会把整个模块打包成一个对象赋值给x）。

而import 'foo'的作用就很特别了：它会执行foo模块里的所有顶级代码，但不会将模块的任何导出绑定到当前模块。

举个实际例子 #

假设foo.js的代码是这样的：

// foo.js
console.log('foo模块被加载执行了！');
export const message = 'Hello from foo';
export function sayHi() {
  console.log(message);
}

// 模块顶级的副作用代码
document.body.style.backgroundColor = '#f0f0f0';

当你在另一个模块里写import 'foo'时：

1. 控制台会打印foo模块被加载执行了！；
2. 页面的背景色会变成浅灰色；
3. 但你在当前模块里尝试用message或者sayHi()的话，会直接报错——因为你没导入这些导出的绑定。

常见使用场景 #

这种导入方式通常用来加载那些带有副作用的模块：

• 全局样式文件：比如import './styles.css'（打包工具会处理这类导入，把样式注入到页面）；
• 初始化全局配置的模块：有些模块会在顶级代码里注册全局事件、初始化第三方库；
• Polyfill库：加载后自动为环境补充缺失的API，不需要在当前模块里调用它的导出。

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