一文搞懂前端开发必备的导入导出方式

ZzMemory2025-07-27 11:26

前言

在前端工程化日益成熟的今天，"模块" 早已成为代码组织的核心。无论是拆分逻辑、复用组件，还是引入第三方库，都离不开 "导出（导出模块内容）" 和 "导入（使用其他模块内容）" 这两个操作。但前端的导出导入方式远比想象中复杂：ES6 模块、CommonJS、资源文件（CSS / 图片）的处理规则各不相同，稍不注意就会踩坑。

本文将从模块系统的本质出发，系统梳理前端项目中常见的导出与导入方式，结合实际场景分析每种方式的用法与注意事项，帮你彻底搞懂如何正确地分享代码。

一、模块系统的核心：为什么需要导出与导入？

在没有模块系统的时代，前端代码通常通过 <script> 标签按顺序加载，变量共享依赖全局作用域，带来了三个严重问题：

  • 命名冲突：不同文件的变量可能重名，覆盖彼此的值；
  • 依赖混乱：无法明确文件加载顺序，依赖关系靠 "约定" 而非 "规则"；
  • 代码冗余：无法按需加载，即使只用到一个函数，也可能需要加载整个文件。

模块系统的出现就是为了解决这些问题：每个文件是一个独立模块，有自己的私有作用域；模块通过 "导出" 暴露需要共享的内容，通过 "导入" 使用其他模块的内容，实现了作用域隔离 和依赖管理。

前端目前主流的模块系统有两种：ES6 模块（ESM） 和 CommonJS（CJS） 。此外，对于非 JS 资源（如 CSS、图片、JSON），也有专门的导出导入规则（通常依赖打包工具如 Webpack、Vite 处理）。

二、ES6 模块（ESM）：现代前端的标准方案

ES6 模块（import/export）是 ECMA 标准定义的模块系统，也是现代前端项目（Vue/React/Angular）的默认选择。它的语法严格且规范，支持静态分析（编译时确定依赖），是工程化工具（Tree-shaking、代码分割）的基础。

1. 默认导出（Default Export）与默认导入

  • 核心逻辑 ：一个模块只能有一个默认导出 ，通常用于导出 "模块的核心内容"（如一个组件、一个主函数），导入时可以自定义名称。

  • 导出方式 ：通过 export default 导出，一个模块只能有一个默认导出。

    • 示例 ：

      • 组件导出 ：

        • 示例：

          js 复制代码 
          // Button.jsx（React组件）
const Button = ({ text }) => {
    return <button>{text}</button>;
};

// 默认导出组件（模块的核心内容）
export default Button;

      • JS函数导出 :

        • 示例:

          js 复制代码 
          // sum.js（工具函数）
function sum(a, b) {
    return a + b;
}

// 默认导出函数
export default sum;

  • 导入方式 ：使用 import 自定义名称 from '模块路径' 导入，名称可以自由定义（无需与导出时一致）。

    • 导入组件 ：

      • 示例：

        js 复制代码 
        // 导入Button组件（名称可自定义，通常保持一致）
import Button from './Button.jsx';
// 使用：<Button text="点击我" />

    • 导入JS函数 ：

      • 示例：

        js 复制代码 
        // 导入sum函数（名称可自定义）
import add from './sum.js';
console.log(add(1, 2)); // 3

2. 命名导出（Named Export）与命名导入

  • 核心逻辑 ：一个模块可以导出多个 "命名成员"，导入时需通过同名变量接收（支持重命名）。

  • 导出方式 ：通过 export 关键字直接导出变量、函数、类等，每个模块可以有多个命名导出。

    • 示例：

      js 复制代码 
      // utils.js
// 导出变量
export const version = "1.0.0";

// 导出函数
export function formatTime(time) {
    return new Date(time).toLocaleString();
}

// 导出类
export class User {
    constructor(name) {
        this.name = name;
    }
}

  • 导入方式 ：使用 import { 成员名 } from '模块路径' 导入，需注意命名必须与导出时一致 （可通过 as 重命名）。

    • 示例：

      js 复制代码 
      // 导入多个命名成员
import { version, formatTime, User } from './utils.js';

// 使用导入的内容
console.log(version); // "1.0.0"
const now = formatTime(Date.now());
const user = new User('张三');


// 重命名导入（解决命名冲突）
import { formatTime as formatDate } from './utils.js';
formatDate(Date.now()); // 等价于 formatTime


// 导入所有命名成员（作为对象）
import * as utils from './utils.js';
console.log(utils.version); // "1.0.0"
utils.formatTime(Date.now());

3. 混合导出与混合导入（前两者混合使用）

实际开发中，模块经常同时包含 "默认导出" 和 "命名导出"（默认导出作为核心，命名导出作为辅助）。

  • 导出方式 ：

    • 示例：

      js 复制代码 
      // utils.js
// 命名导出：辅助工具
export const PI = 3.14;
export function log(msg) { console.log(msg); }

// 默认导出：核心工具
export default function calculateArea(r) {
    return PI * r * r;
}

  • 导入方式 ：

    • 示例：

      js 复制代码 
      // 同时导入默认成员和命名成员
import calculateArea, { PI, log } from './utils.js';

log(PI); // 3.14
console.log(calculateArea(2)); // 12.56


// 也可以用对象形式整合（默认成员会被放在default属性中）
import * as utils from './utils.js';
utils.log(utils.PI); // 3.14
utils.default(2); // 12.56（默认导出的内容在default属性）

补充：ESM 的导入导出注意事项

  • 静态分析 ：import/export 必须放在模块顶层（不能在 if、函数内使用），因为浏览器 / 打包工具需要在编译时确定依赖关系。
  • 严格模式 ：ESM 模块默认运行在严格模式下（use strict），变量必须声明后使用，禁止 with 等语法。
  • 路径规范 ：导入本地模块时，路径必须带后缀（如 ./utils.js 不能省略 .js）或目录（如 ./components/），第三方库可直接写名称（如 import React from 'react'，由打包工具解析）。

三、CommonJS：Node.js 与历史项目的兼容方案

CommonJS（CJS）是 Node.js 的模块系统，早期前端项目（如 Webpack 1.x 时代）也广泛使用。虽然现在 ESM 是主流，但很多第三方库（尤其是同时支持 Node 和浏览器的库）仍会保留 CJS 格式，因此需要了解其导出导入规则。

导出方式：module.exports 与 exports

CJS 通过 module.exports 定义模块的导出内容（一个模块的 "对外接口"），exports是module.exports的引用（简化写法）。

  • 示例（导出多个成员）：

    js 复制代码 
    // utils.js（CJS模块）
// 方式1：直接给module.exports赋值（导出一个对象）
module.exports = {
    PI: 3.14,
    sum: (a, b) => a + b
};

// 方式2：通过exports添加属性（等价于给module.exports添加属性）
exports.log = (msg) => console.log(msg);
// 注意：不能直接给exports赋值（会断开与module.exports的引用）
// exports = { log: ... } // 错误！这样导出会失效

  • 示例（导出单个成员）:

    js 复制代码 
    // 导出单个值（如一个函数）
module.exports = function formatTime(time) {
    return new Date(time).toLocaleString();
};

导入方式：require()

CJS 通过 require(模块路径) 导入模块，返回的是目标模块的 module.exports。

  • 示例 ：

    js 复制代码 
    // 导入对象形式的导出
const utils = require('./utils.js');
console.log(utils.PI); // 3.14
utils.sum(1, 2); // 3
utils.log('hello'); // 打印hello


// 导入单个值（函数）
const formatTime = require('./utils.js');
formatTime(Date.now()); // 调用函数

四、CJS 与 ESM 的互操作

由于实际开发中 ESM 和 CJS 并存，经常需要混合使用，此时需要注意两者的兼容规则。

  • ESM 导入 CJS 模块 ：CJS 的 module.exports 会被当作 ESM 的 "默认导出"。

    js 复制代码 
    // ESM模块中导入CJS模块
import cjsModule from './cjs-module.js';
// cjsModule 等价于 CJS模块的 module.exports

  • CJS 导入 ESM 模块 ：Node.js 12+ 支持，但需要通过 require() 接收一个 Promise（因为 ESM 是异步加载的）。

    js 复制代码 
    // CJS模块中导入ESM模块（异步）
(async () => {
    const esmModule = await require('./esm-module.js');
    // esmModule.default 是ESM的默认导出，esmModule包含命名导出
})();

五、资源文件的导出与导入

前端项目中，除了 JS 模块，CSS、图片、JSON 等资源也需要 "导出" 和 "导入" 。这些资源本身不具备 "导出" 能力，而是通过打包工具（Webpack、Vite、Rollup）的 loader 或插件实现 "导入即可用"。

内容由 AI 生成

请你撰写一篇博客，为我详解前端项目的各种导出，以及与其对应的导入方式

已完成思考

前端项目中的导出与导入：从基础到实战全解析

在前端工程化日益成熟的今天，"模块" 早已成为代码组织的核心。无论是拆分逻辑、复用组件，还是引入第三方库，都离不开 "导出（导出模块内容）" 和 "导入（使用其他模块内容）" 这两个操作。但前端的导出导入方式远比想象中复杂：ES6 模块、CommonJS、资源文件（CSS / 图片）的处理规则各不相同，稍不注意就会踩坑。

本文将从 "模块系统的本质" 出发，系统梳理前端项目中常见的导出与导入方式，结合实际场景分析每种方式的用法与注意事项，帮你彻底搞懂 "如何正确地分享代码"。

一、模块系统的核心：为什么需要导出与导入？

在没有模块系统的时代，前端代码通常通过 <script> 标签按顺序加载，变量共享依赖全局作用域，带来了三个严重问题：

  • 命名冲突：不同文件的变量可能重名，覆盖彼此的值；

  • 依赖混乱：无法明确文件加载顺序，依赖关系靠 "约定" 而非 "规则"；

  • 代码冗余：无法按需加载，即使只用到一个函数，也可能需要加载整个文件。

模块系统的出现就是为了解决这些问题：每个文件是一个独立模块，有自己的私有作用域；模块通过 "导出" 暴露需要共享的内容，通过 "导入" 使用其他模块的内容，实现了作用域隔离 和依赖管理。

前端目前主流的模块系统有两种：ES6 模块（ESM） 和 CommonJS（CJS） 。此外，对于非 JS 资源（如 CSS、图片、JSON），也有专门的导出导入规则（通常依赖打包工具如 Webpack、Vite 处理）。

二、ES6 模块（ESM）：现代前端的标准方案

ES6 模块（import/export）是 ECMA 标准定义的模块系统，也是现代前端项目（Vue/React/Angular）的默认选择。它的语法严格且规范，支持静态分析（编译时确定依赖），是工程化工具（Tree-shaking、代码分割）的基础。

1. 命名导出（Named Export）与命名导入

核心逻辑：一个模块可以导出多个 "命名成员"，导入时需通过同名变量接收（支持重命名）。

导出方式：

通过 export 关键字直接导出变量、函数、类等，每个模块可以有多个命名导出。

javascript

javascript 复制代码 
// utils.js
// 导出变量
export const version = "1.0.0";

// 导出函数
export function formatTime(time) {
  return new Date(time).toLocaleString();
}

// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}
对应的导入方式：

使用 import { 成员名 } from '模块路径' 导入，需注意命名必须与导出时一致 （可通过 as 重命名）。

javascript

javascript 复制代码 
// 导入多个命名成员
import { version, formatTime, User } from './utils.js';

// 使用导入的内容
console.log(version); // "1.0.0"
const now = formatTime(Date.now());
const user = new User('张三');


// 重命名导入（解决命名冲突）
import { formatTime as formatDate } from './utils.js';
formatDate(Date.now()); // 等价于 formatTime


// 导入所有命名成员（作为对象）
import * as utils from './utils.js';
console.log(utils.version); // "1.0.0"
utils.formatTime(Date.now());

2. 默认导出（Default Export）与默认导入

核心逻辑：一个模块只能有一个默认导出，通常用于导出 "模块的核心内容"（如一个组件、一个主函数），导入时可以自定义名称。

导出方式：

通过 export default 导出，一个模块只能有一个默认导出。

javascript

javascript 复制代码 
// Button.jsx（React组件）
const Button = ({ text }) => {
  return <button>{text}</button>;
};

// 默认导出组件（模块的核心内容）
export default Button;

javascript

javascript 复制代码 
// sum.js（工具函数）
function sum(a, b) {
  return a + b;
}

// 默认导出函数
export default sum;
对应的导入方式：

使用 import 自定义名称 from '模块路径' 导入，名称可以自由定义（无需与导出时一致）。

javascript

javascript 复制代码 
// 导入Button组件（名称可自定义，通常保持一致）
import Button from './Button.jsx'; 
// 使用：<Button text="点击我" />


// 导入sum函数（名称可自定义）
import add from './sum.js'; 
console.log(add(1, 2)); // 3

3. 混合导出与混合导入

实际开发中，模块经常同时包含 "默认导出" 和 "命名导出"（默认导出作为核心，命名导出作为辅助）。

导出示例：

javascript

javascript 复制代码 
// utils.js
// 命名导出：辅助工具
export const PI = 3.14;
export function log(msg) { console.log(msg); }

// 默认导出：核心工具
export default function calculateArea(r) {
  return PI * r * r;
}
导入示例：

javascript

javascript 复制代码 
// 同时导入默认成员和命名成员
import calculateArea, { PI, log } from './utils.js';

log(PI); // 3.14
console.log(calculateArea(2)); // 12.56


// 也可以用对象形式整合（默认成员会被放在default属性中）
import * as utils from './utils.js';
utils.log(utils.PI); // 3.14
utils.default(2); // 12.56（默认导出的内容在default属性）

4. ESM 的注意事项

  • 静态分析 ：import/export 必须放在模块顶层（不能在 if、函数内使用），因为浏览器 / 打包工具需要在编译时确定依赖关系。
  • 严格模式 ：ESM 模块默认运行在严格模式下（use strict），变量必须声明后使用，禁止 with 等语法。
  • 路径规范 ：导入本地模块时，路径必须带后缀（如 ./utils.js 不能省略 .js）或目录（如 ./components/），第三方库可直接写名称（如 import React from 'react'，由打包工具解析）。

三、CommonJS：Node.js 与历史项目的兼容方案

CommonJS（CJS）是 Node.js 的模块系统，早期前端项目（如 Webpack 1.x 时代）也广泛使用。虽然现在 ESM 是主流，但很多第三方库（尤其是同时支持 Node 和浏览器的库）仍会保留 CJS 格式，因此需要了解其导出导入规则。

1. 导出方式：module.exports 与 exports

CJS 通过 module.exports 定义模块的导出内容（一个模块的 "对外接口"），exports 是 module.exports 的引用（简化写法）。

javascript

javascript 复制代码 
// utils.js（CJS模块）
// 方式1：直接给module.exports赋值（导出一个对象）
module.exports = {
  PI: 3.14,
  sum: (a, b) => a + b
};

// 方式2：通过exports添加属性（等价于给module.exports添加属性）
exports.log = (msg) => console.log(msg);
// 注意：不能直接给exports赋值（会断开与module.exports的引用）
// exports = { log: ... } // 错误！这样导出会失效

javascript

javascript 复制代码 
// 导出单个值（如一个函数）
module.exports = function formatTime(time) {
  return new Date(time).toLocaleString();
};

2. 导入方式：require()

CJS 通过 require(模块路径) 导入模块，返回的是目标模块的 module.exports。

javascript

javascript 复制代码 
// 导入对象形式的导出
const utils = require('./utils.js');
console.log(utils.PI); // 3.14
utils.sum(1, 2); // 3
utils.log('hello'); // 打印hello


// 导入单个值（函数）
const formatTime = require('./utils.js');
formatTime(Date.now()); // 调用函数

3. CJS 与 ESM 的互操作

由于 ESM 和 CJS 并存，实际开发中经常需要混合使用，此时需要注意两者的兼容规则：

  • ESM 导入 CJS 模块 ：CJS 的 module.exports 会被当作 ESM 的 "默认导出"。

    javascript

    javascript 复制代码 
    // ESM模块中导入CJS模块
import cjsModule from './cjs-module.js'; 
// cjsModule 等价于 CJS模块的 module.exports

  • CJS 导入 ESM 模块 ：Node.js 12+ 支持，但需要通过 require() 接收一个 Promise（因为 ESM 是异步加载的）。

    javascript

    javascript 复制代码 
    // CJS模块中导入ESM模块（异步）
(async () => {
  const esmModule = await require('./esm-module.js');
  // esmModule.default 是ESM的默认导出，esmModule包含命名导出
})();

四、资源文件的导出与导入：不止于 JS

前端项目中，除了 JS 模块，CSS、图片、JSON 等资源也需要 "导出" 和 "导入"。这些资源本身不具备 "导出" 能力，而是通过打包工具（Webpack、Vite、Rollup）的 loader 或插件实现 "导入即可用"。

1. JSON 文件：原生支持的结构化数据

JSON 是少数 ESM 原生支持导入的非 JS 资源（无需额外配置），导入后直接作为 JS 对象使用。

  • 示例 ：

    • 无需导出（JSON本身就是数据）：

      json 复制代码 
      // config.json（导出：JSON本身就是数据，无需显式导出）
{
    "baseUrl": "https://api.example.com",
    "timeout": 5000;
}

    • 导入：

      js 复制代码 
      // 导入JSON（ESM原生支持）
import config from './config.json';
console.log(config.baseUrl); // "https://api.example.com"

// 也可以用命名导入（但JSON是一个整体对象，通常用默认导入）
import { baseUrl } from './config.json';

2. CSS 与样式文件：依赖打包工具的处理

CSS 本身没有 "模块" 概念，导入 CSS 本质是 "将样式注入页面" ，具体行为由打包工具决定。

  • 示例 ：

    • 无需导出：

      css 复制代码 
      /* style.css（无需显式导出） */
.container {
    padding: 20px;
}

    • 导入：

      js 复制代码 
      // 导入CSS（通过Webpack的css-loader/style-loader或Vite的内置处理）
import './style.css';
// 导入后，style.css的样式会被注入到页面的<style>标签中
CSS Modules：避免样式冲突的导出导入

为了解决样式全局污染问题 ，CSS Modules 将 CSS 类名处理为唯一标识符（如 container 变为 style_container_123），并通过 "导出类名映射" 让 JS 控制样式。

  • 示例 ：

    • 无需导出：

      css 复制代码 
      /* style.module.css（CSS Modules文件，需以.module.css结尾） */
.container {
    padding: 20px;
}

.title {
    font-size: 18px;
}

    • 导入：

      js 复制代码 
      // 导入CSS Modules（返回类名映射对象）
import styles from './style.module.css';

// 在组件中使用（类名会被自动转换为唯一值）
<div className={styles.container}>
    <h1 className={styles.title}>标题</h1>
</div>

3. 图片、字体等静态资源：导入即 URL

图片、字体、视频等资源导入后，通常会被打包工具处理为 "访问 URL"（开发环境是临时路径，生产环境是哈希文件名路径）。

  • 示例 ：

    • 无需导出 ：和.css以及.json文件一样，这种静态资源本身就是数据，无需导出。

    • 导入：

      js 复制代码 
      // 导入图片（返回图片的URL）
import logoImg from './logo.png';

// 在组件中使用
<img src={logoImg} alt="logo" />;
// 等价于 <img src="/static/logo.8f32.png" alt="logo" />（生产环境路径）


// 导入字体（在CSS中使用）
import './iconfont.ttf';
/* 在CSS中直接引用字体名 */
@font-face {
    font - family: 'iconfont';
    src: url('./iconfont.ttf') format('truetype');
}

五、动态导入（按需加载）与懒加载

无论是 ESM 还是 CJS，前面讲的都是 "静态导入"（编译时确定依赖） 。但在大型项目中，我们需要 "按需加载"（如点击按钮后才加载某个组件） ，这就需要 "动态导入"。

ES6 标准定义的 import() 函数（返回 Promise）不仅是动态导入 的核心语法，更是实现 "按需加载" 的关键工具。它允许在程序运行时（而非编译时）决定加载哪个模块，配合打包工具的代码分割能力 ，能显著优化前端项目的加载性能。而前端开发中，比较常用的组件懒加载正是动态导入在前端组件场景下的典型应用，两者紧密关联又各有侧重。

动态导入的基本逻辑

动态导入打破了静态 import 必须在模块顶层声明的限制，支持在函数、条件语句等运行时环境中调用，实现 "按需加载"。

  • 示例：

    js 复制代码 
    // 动态导入一个工具模块
const loadUtils = async () => {
    try {
        // 调用import()返回Promise，需用await或.then()处理
        const utilsModule = await import('./utils.js');
        // 访问模块内容（默认导出在.default，命名导出直接访问）
        console.log(utilsModule.PI); // 命名导出的常量
        utilsModule.default(); // 默认导出的函数
    } catch (err) {
        console.error('模块加载失败：', err);
    }
};

// 触发加载（如用户操作时）
button.addEventListener('click', loadUtils);

组件懒加载

组件懒加载是指 "在需要渲染组件时才加载其代码"（而非初始加载时一次性加载所有组件） ，本质是通过动态导入的 import() 语法实现组件代码的按需加载。它是动态导入在前端框架中的具体应用，核心目标是减少初始加载的资源体积。

1. 原生 JS 中的组件懒加载

在不依赖框架的场景下，可直接通过 import() 动态加载组件代码，并在加载完成后手动渲染。

  • 示例：

    js 复制代码 
    // 定义一个懒加载组件的函数
const loadLazyComponent = async () => {
    // 动态导入组件模块
    const { LazyComponent } = await import('./LazyComponent.js');
    // 加载完成后渲染到页面
    const container = document.getElementById('container');
    container.appendChild(LazyComponent.render());
};

// 当用户滚动到可视区域时加载（示例）
const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
        loadLazyComponent();
        observer.disconnect();
    }
});
observer.observe(document.getElementById('lazy-trigger'));
2. 框架中的组件懒加载实现

主流前端框架（React、Vue）都对组件懒加载提供了封装，简化了动态导入的使用流程，但底层仍依赖 import() 语法。​

React（React.lazy + Suspense）

  • React 中的组件懒加载：

    • React.lazy 是对 import() 的封装，将动态导入的模块转换为可直接在 JSX 中使用的组件；
    • Suspense 用于处理加载状态（如显示加载动画）。

  • 示例：

    js 复制代码 
    // React 组件懒加载（基于动态导入）
const LazyComponent = React.lazy(() => import('./LazyComponent.jsx'));

function App() {
    return (
        <div>
            {/* 当 LazyComponent 被渲染时，才会触发 import() 加载代码 */}
            <Suspense fallback={<div>加载中...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}
Vue（异步组件与路由懒加载）

  • Vue 中的组件懒加载：Vue 通过 "异步组件" 语法支持组件懒加载，路由配置中更可直接使用动态导入实现路由级别的懒加载。

  • 示例 ：

    js 复制代码 
    // Vue 异步组件（基础用法）
const LazyComponent = () => import('./LazyComponent.vue');

// 在组件中使用
export default {
    components: {
        LazyComponent // 只有当组件被渲染时才会加载
    }
};

// Vue 路由懒加载（更常用）
const routes = [
    {
        path: '/detail',
        // 访问 /detail 路由时才加载组件代码
        component: () => import('./Detail.vue')
    }
];

代码分割：动态导入与懒加载的底层支撑

无论是动态导入工具模块，还是懒加载组件，打包工具（Webpack、Vite、Rollup）都会对被 import() 导入的模块进行代码分割：将其单独打包为一个独立的资源文件（如 LazyComponent.8a2b.js），而非合并到主文件中。​

  • 初始加载：只加载主文件和当前必需的资源，减少首次加载的 JS 体积；​

  • 按需加载：当触发动态导入或懒加载时，才会通过网络请求加载对应的分割文件，实现资源的 "用多少加载多少"。​

这一机制是前端性能优化的核心手段之一，尤其适用于大型应用（如后台管理系统、多页面应用），能显著提升首屏加载速度。

六、实战总结：如何选择合适的导出导入方式？

  1. 现代前端项目（Vue/React/Angular） ：优先使用 ESM 的 export/import，默认导出用于核心内容（如组件、主函数），命名导出用于辅助工具（如常量、工具函数）。
  2. Node.js 或兼容旧项目 ：使用 CommonJS 的 module.exports/require，注意 exports 不能直接赋值。
  3. 样式文件 ：普通 CSS 直接用 import './style.css'；需要避免样式冲突时，使用 CSS Modules（import styles from './style.module.css'）。
  4. 静态资源 ：图片、字体等通过 import 导入，直接使用返回的 URL。
  5. 按需加载场景 ：用 import() 动态导入，配合代码分割优化性能。

结语

导出与导入看似简单，却是前端模块化的基石。理解不同模块系统的规则，不仅能避免 "导入了却用不了" 的低级错误，更能帮助我们设计更合理的代码结构。下次写代码时，不妨多思考：这个模块应该怎么导出？其他地方会怎么导入？合理的导出导入，会让你的代码更易读、更易维护。

希望这篇文章能够对你有所帮助，如果本文有错误或者缺漏，请你在评论区指出，大家一起进步，谢谢🙏。

相关推荐
陈随易6 分钟前
AI新技术VideoTutor，幼儿园操作难度，一句话生成讲解视频
前端·后端·程序员
Pedantic9 分钟前
SwiftUI 按钮Button：完整教程
前端
前端拿破轮11 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温13 分钟前
DOM元素添加技巧全解析
前端
JSON_L16 分钟前
Vue 电影导航组件
前端·javascript·vue.js
用户214118326360224 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验
前端
大模型真好玩38 分钟前
深入浅出LangChain AI Agent智能体开发教程（四）—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT：结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发：如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX：从语法糖到React的魔法转换
前端·react.js
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03vue数据变化但页面不变04KGG转MP3工具|非KGM文件|解密音频05干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致08ChatGPT Agent 完全使用指南：2025年7月最新功能详解09《魔兽世界》提示lua警告的含义及解决方法10这次领先Cursor！体验了Trae 2.0 SOLO 模式，超酷！