es6模块与Commonjs是底层逻辑不同的两套系统：ESM为编译时静态解析、实时绑定；CJS为运行时动态执行、值拷贝。混用会导致报错、状态不一致、Tree-shaking失效等问题。
ES6模块（import/export）和CommonJS（require/module.exports）不是“两种写法而已”，而是底层加载逻辑、绑定机制、执行时机完全不同的两套系统。选错或混用，轻则报错（比如 ReferenceError: require is not defined），重则状态不一致、热更新失效、Tree-shaking 失效。
为什么 import 不能写在 if 里，而 require 可以？
因为 import 是编译时静态解析的：打包工具（如 vite、webpack）在代码运行前就扫描所有 import 语句，构建依赖图；它不允许路径是变量、也不允许条件控制——否则就无法做静态分析和摇树优化。
而 require 是运行时同步执行的函数调用，路径可以拼接、可以走 if 分支，甚至能 require('./' + env + '.js')。
- ✅ 正确（ESM）：
import { api } from './utils.js'; - ❌ 错误（ESM）：
if (DEV) { import('./dev-tools.js'); }→ 必须用
import('./dev-tools.js')（动态导入，返回 promise） - ✅ 正确（CJS）：
if (process.env.node_ENV === 'development') { const devTools = require('./dev-tools'); }
export let count = 0 被修改后，import 进来的值会变吗？
会——这是 ES6 模块最常被忽略的关键特性：import 绑定的是导出值的**实时引用**，不是快照。
- ES6 模块中：
// counter.js export let count = 0; setTimeout(() => { count = 100; }, 100); // main.js import { count } from './counter.js'; console.log(count); // 0 → 立即输出 setTimeout(() => console.log(count), 200); // 100 → 后续输出 - CommonJS 中：
// counter.js let count = 0; setTimeout(() => { count = 100; }, 100); module.exports = { count }; // main.js const { count } = require('./counter'); console.log(count); // 0 → 始终是初始值，不会变
这个差异直接影响状态共享逻辑（比如全局配置、计数器、单例缓存），混用时极易出现“改了但没生效”的问题。
Node.js 里同时用 import 和 require 会怎样？
node.js 允许共存，但有硬性限制：一个文件只能属于一种模块类型。混用会导致 ERR_REQUIRE_ESM 或 Cannot use import statement outside a module。
立即学习“Java免费学习笔记（深入）”；
- ✅ 合法：
.mjs文件或package.json中设"type": "module"→ 只能用import，require报错 - ✅ 合法：
.cjs文件或"type": "commonjs"→ 只能用require，import报错 - ⚠️ 危险：
.js文件 + 无type字段 → Node.js 默认按 CommonJS 解析，此时写import直接 SyntaxError - ? 动态互操作：
import()可加载 CJS 模块（返回默认导出对象），createRequire(import.meta.url)可在 ESM 中模拟require
浏览器里能直接用 require 吗？
不能。浏览器原生不支持 CommonJS，require is not defined 是必然结果。即使你用 Webpack 打包，它也只是把 require 替换成自己实现的模块加载函数，并非“浏览器支持了 CommonJS”。
- ✅ 浏览器原生只认：
+import/export - ❌
require('./utils')在任何纯 html 页面中都会报错，不管有没有打包工具 - ? 补救方案：用
import('./utils.js')（动态导入）替代条件require，它返回 Promise，且浏览器原生支持
真正麻烦的从来不是语法怎么写，而是搞不清「这个模块是在编译期被分析的，还是在运行期才执行的」「导入的是活的引用，还是死的快照」「当前环境到底按哪种规则解析这个 .js 文件」。这些细节一旦错位，调试成本远高于写代码本身。