JavaScript模块化关键是正确使用import/export：浏览器需type="module"且路径严格，Node.js需启用ESM；命名/默认导出对应不同导入语法；动态import()跨环境异步加载；路径解析规则因环境而异。
JavaScript 模块化不是“要不要用”的问题，而是“怎么用对”的问题——import 和 export 在浏览器和 Node.js 中行为不一致，直接照搬教程代码大概率报错。
浏览器中使用 import 必须加 type="module"
浏览器默认把 当作传统脚本（非模块），即使写了 import 也会抛出 Uncaught SyntaxError: Cannot use import statement outside a module。
- 必须显式声明：
- 模块脚本自动启用严格模式、顶层
this为undefined、不共享全局作用域 - 模块路径必须是相对路径（
./util.js）、绝对路径（/js/utils.js）或完整 URL；不能省略扩展名，也不能用 bare specifier（如import {foo} from 'lodash'会报错）
export 的三种写法及其导入限制
导出方式决定导入方式，混用会导致 undefined 或语法错误。
-
命名导出（named export）：可多个，必须用大括号导入
export const PI = 3.14;export function add(a, b) { return a + b; }
→ 导入：import { PI, add } from './math.js'; -
默认导出（default export）：每个模块最多一个，导入时名字任意
export default function greet() { return 'hi'; }
→ 导入：import hello from './greet.js';（注意无大括号） -
混合导出：可以同时有默认 + 命名导出，但不能重复导出同名变量
export default class App {}export const VERSION = '1.0';
→ 导入：import App, { VERSION } from './app.js';
Node.js 中的 ESM 支持需要明确启用
Node.js 默认仍以 CommonJS 模式运行 .js 文件，import 会直接报错，除非满足以下任一条件：
立即学习“Java免费学习笔记（深入）”；
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
- 文件扩展名为
.mjs - 在
package.json中设置"type": "module" - 启动时加参数：
node --input-type=module -e "import('./index.js')"
注意：一旦启用 ESM，require() 就不可用（除非用 import { createRequire } from 'module' 曲线救国）；且 __dirname 和 __filename 不再存在，需用 import.meta.url 配合 file:// URL API 手动解析。
动态 import() 是唯一跨环境的异步加载方案
静态 import 语句必须在顶层，无法条件加载；而 import() 是函数调用，返回 Promise，浏览器和 Node.js 均原生支持。
- 可用于按需加载组件：
const { render } = await import('./dashboard.js'); - 可用于兼容旧代码：
if (isMobile) await import('./mobile-ui.js'); - 注意它不创建新的作用域绑定，导入的模块仍遵循其自身导出规则（比如默认导出要解构
.default）
真正容易被忽略的是路径解析规则和环境差异——不是语法写错了，而是你根本没意识到 import('./utils') 在浏览器里找的是当前页面 URL 下的 /utils.js，而在 Node.js 里找的是相对于当前模块文件的 ./utils.js。路径写错，报错信息却只说 “failed to fetch”，很容易绕进去。
