JavaScript模块化使用技巧分享

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript模块化怎么用｜代码组织技巧分享》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

ESM模块语法需用import语句、带.js后缀、区分default与named导出；不可混用CommonJS；import.meta.url替代__dirname；循环引用导致未初始化变量为undefined。

ESM 模块语法怎么写才不会报错

浏览器和 Node.js（v14.13+ 默认启用）都支持原生 ESM，但写法稍有差异，常见错误是直接用 require() 或漏写 .js 后缀。

• 导入必须用 import 语句，不能在条件或函数内动态写（除非用 import() 动态导入）
• 路径必须带扩展名（import { foo } from './utils.js'），否则浏览器会 404
• Node.js 中若用 .mjs 后缀或 "type": "module" 字段，require() 就不可用
• 默认导出和具名导出不能混用写法：export default function bar() {} 对应 import bar from './bar.js'；而 export function baz() {} 必须用 import { baz } from './baz.js'

/* math.js */
export function add(a, b) {
  return a + b;
}
export const PI = 3.14159;
/ main.js /
import { add, PI } from './math.js';
console.log(add(2, 3), PI); // 5 3.14159

CommonJS 和 ESM 能不能混用

不能直接混用。Node.js 允许同一项目中同时存在 .cjs 和 .mjs 文件，但跨模块调用时会触发严格隔离：ESM 无法 require() CJS 模块，CJS 也无法 import ESM 模块（require('./esm.mjs') 会报 ERR_REQUIRE_ESM）。

• 若必须桥接，CJS 可用 import() 动态加载 ESM（返回 Promise），但无法同步获取值
• ESM 中可通过 createRequire() 创建 CJS require 函数，仅限 Node.js 环境
• Webpack/Vite 等打包工具能自动处理混合导入，但底层逻辑仍是转换，不是运行时互通

// 在 ESM 文件中桥接 CJS（Node.js only）
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const legacy = require('./legacy.cjs');

为什么 import.meta.url 比 __dirname 更可靠

ESM 中没有 __dirname 和 __filename，直接访问会报 ReferenceError。用 import.meta.url 是唯一标准方式，它返回当前模块的完整 URL（如 file:///path/to/module.js），再配合 URL 构造器和 path 模块（Node）或 new URL(..., import.meta.url)（浏览器）可安全解析路径。

• 浏览器中：new URL('./assets/', import.meta.url) 得到绝对 URL，不依赖当前页面路径
• Node.js 中：fileURLToPath(import.meta.url) 配合 dirname() 才能得到目录路径
• 硬编码相对路径（如 ../config.json）在打包后极易失效，尤其被 Rollup/Webpack 提取为 chunk 时

// Node.js 中获取当前模块所在目录
import { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
console.log(__dirname); // /project/src

模块循环引用时实际发生了什么

ESM 的循环引用不是“报错”，而是“部分初始化”——模块对象已创建并导出，但未执行完脚本，未赋值的变量为 undefined。这比 CommonJS 的“导出空对象再填充”更透明，但也更容易踩坑。

• A.js 导入 B.js，B.js 又导入 A.js → A 执行到 import 行时暂停，先执行 B，B 访问 A 的导出项，此时 A 中尚未执行到那行 export const x = ...，x 就是 undefined
• 函数声明会被提升，所以即使在导入后定义，也能被循环引用方调用；但 const/let 不会提升，访问即 ReferenceError
• 避免在模块顶层直接使用对方未完成初始化的值，把逻辑移到函数内延迟执行

模块化不是加几个 import 就完事，关键是理解导出时机、路径解析规则和环境边界。浏览器里少一个 .js 后缀，Node 里多一个 type: module，都可能让整个模块图加载失败。真正麻烦的往往不是语法，而是那些没报错但值为 undefined 的循环引用变量。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript模块化使用技巧分享》文章吧，也可关注golang学习网公众号了解相关技术文章。