JavaScript模块化通过export导出（命名导出允许多个、需原名导入；默认导出仅一个、可自定义名）和import导入（大括号匹配命名导出，无括号匹配默认导出），支持静态与动态导入，需注意路径规范及环境配置。
JavaScript 的模块化用 export 暴露内容，用 import 引入内容，核心是“谁提供、谁使用”，两者需配合文件系统路径或打包工具支持（如 Webpack、Vite 或原生 ES 模块的 type="module"）。
基本导出方式：命名导出和默认导出
export 有两种常用写法：
-
命名导出（Named Export）：可导出多个值，导入时必须用原名（或重命名），适合导出工具函数、常量、类等。
例：export const PI = 3.14;export function add(a, b) { return a + b; }export class Calculator { ... } -
默认导出（Default Export）：每个模块最多一个，默认导出可无名，导入时可自定义名称，适合导出主功能或单个主要对象。
例：export default function greet(name) { return `Hello, ${name}`; }
或export default { version: '1.0', init() { ... } };
对应导入方式：解构命名导入与自由命名默认导入
import 写法要和导出方式匹配：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 导入命名导出：用大括号，名字必须一致（或用
as重命名）import { PI, add, Calculator } from './math.js';import { add as sum } from './math.js'; // 重命名 - 导入默认导出：不加括号，名字任意
import greet from './greeting.js';import MyGreeting from './greeting.js'; // 名字可自定 - 同时导入默认 + 命名：
import DefaultFunc, { PI, add } from './utils.js';
动态导入 import()：按需加载，返回 Promise
import() 是函数调用形式，用于条件加载、路由懒加载或减少首屏体积：
立即学习“Java免费学习笔记（深入）”；
- 返回 Promise，需
await或.then()const module = await import('./heavy-module.js');module.default(); // 调用默认导出module.someFunction(); // 调用命名导出 - 常用于组件动态加载：
const Chart = await import('chart.js').then(m => m.default);
注意点：路径、文件后缀与环境支持
实际使用中容易卡在几个细节：
- 路径必须是相对（
./或../）或绝对（/）URL；不能省略./，import utils from 'utils'会被当作第三方包处理 - 原生浏览器中，HTML 脚本需声明
<script type="module" src="main.js"></script> - Node.js 中需在
package.json加"type": "module"，或用.mjs后缀 - 默认导出和命名导出可共存，但一个
export default只能有一个
