ES Module 的 import 导入和 import () 动态导入

ES Module 的 import 导入和 import () 动态导入介绍

一、ES Module 简介

ES Module 是 JavaScript 官方提供的标准化模块系统，它的出现解决了长期以来 JavaScript 在模块管理方面的混乱局面。通过 ES Module，开发者可以更加方便地组织和复用代码，提高代码的可维护性和可扩展性。

二、import 导入

（一）基本语法

import 默认导出

在一个模块中，可以使用export default来定义默认导出。例如，在myModule.js文件中：

// myModule.js

const myFunction = () => {
   
  console.log("这是一个默认导出的函数");
};

export default myFunction;

在另一个模块中导入这个默认导出：

// main.js

import myFunction from "./myModule.js";

myFunction(); // 输出：这是一个默认导出的函数

import 具名导出

模块中也可以使用具名导出，将多个变量、函数或类分别导出。例如：

// mathModule.js

export const add = (a, b) => a + b;

export const subtract = (a, b) => a - b;

在其他模块中导入具名导出：

// main.js

import {
    add, subtract } from "./mathModule.js";

console.log(add(2, 3)); // 输出：5

console.log(subtract(5, 3)); // 输出：2

也可以给 import 的具名导出起别名：

// main.js

import {
    add as sum, subtract as difference } from "./mathModule.js";

console.log(sum(2, 3)); // 输出：5

console.log(difference(5, 3)); // 输出：2

混合导入

一个模块可以同时有默认导出和具名导出，在导入时也可以混合使用：