JavaScript模块化：import与export实战教程

一分耕耘，一分收获！既然打开了这篇文章《JavaScript模块化：import与export使用教程》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

JavaScript模块化关键是正确使用import/export：浏览器需type="module"且路径严格，Node.js需启用ESM；命名/默认导出对应不同导入语法；动态import()跨环境异步加载；路径解析规则因环境而异。

JavaScript 模块化不是“要不要用”的问题，而是“怎么用对”的问题——import 和 export 在浏览器和 Node.js 中行为不一致，直接照搬教程代码大概率报错。

浏览器中使用 import 必须加 type="module"

浏览器默认把

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 会直接报错，除非满足以下任一条件：

• 文件扩展名为 .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”，很容易绕进去。

终于介绍完啦！小伙伴们，这篇关于《JavaScript模块化：import与export实战教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！