如何导入导出模块_Javascript的语法是什么

JavaScript模块语法核心是ES6的export/import,支持命名导出、默认导出及混合导入;需顶层使用,路径带扩展名,环境须支持ESM,与CommonJS不兼容。

JavaScript 中导入和导出模块的语法,核心是 ES6 模块系统(ECMAScript Modules,简称 ESM),它通过 exportimport 关键字实现代码复用与组织。注意:这与旧的 CommonJS(module.exports/require)语法不同,两者不能混用,且运行环境需支持 ESM(如现代浏览器、Node.js 12+ 默认启用 ESM 需加 "type": "module")。

如何导出模块(export)

一个 JS 文件可以导出变量、函数、类等,供其他文件使用。

  • 命名导出(Named Export):可导出多个,名字必须一致才能正确导入。
    例:
    export const PI = 3.14;
    export function add(a, b) { return a + b; }
    export class Calculator { ... }
  • 默认导出(Default Export):每个模块最多一个,默认导出不强制命名,导入时可自定义名称。
    例:
    export default function greet() { return 'Hello'; }
    或:export default class App { ... }
  • 统一导出 / 重命名导出
    export { PI as pi, add as sum };
    export { default as main } from './main.js';

如何导入模块(import)

导入必须在模块顶层(不能在函数或条件中),且路径需明确(相对或绝对,不支持自动扩展名)。

  • 导入命名导出
    import { PI, add } from './math.js';
    import { PI as piVal } from './math.js';
  • 导入默认导出
    import greet from './greet.js';(无需大括号)
    import myGreet from './greet.js';(可任意命名)
  • 同时导入默认 + 命名
    import main, { PI, add } from './math.js';
  • 只执行模块(无绑定导入)
    import './polyfill.js';(常用于加载副作用代码,如全局补丁)

常见注意事项

  • 浏览器中使用 才能启用 ESM;脚本默认是严格模式,且有 CORS 要求。
  • Node.js 中若用 .js 后缀,需在 package.json 中声明 "type": "module";否则可用 .mjs 后缀。
  • exportimport 只能出现在顶层作用域,不能在 if 或函数内动态使用(动态导入可用 import() 函数,返回 Promise)。
  • 路径必须带扩展名(如 ./utils.js),不能省略(Node.js ESM 不支持自动解析 .js/.mjs)。

与 CommonJS 的简单对比

CommonJS(Node.js 传统方式)用 module.exportsrequire(),是运行时同步加载;ESM 是编译时静态分析、支持树摇(tree-shaking)、原生支持循环依赖处理。两者语法不兼容——例如不能在同一个文件里混用 exportmodule.exports