ES模块知识详解

最新推荐文章于 2025-05-26 01:00:15 发布

就不告絮你

最新推荐文章于 2025-05-26 01:00:15 发布

阅读量9k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端文章标签： es

本文链接：https://blog.youkuaiyun.com/hpc_kiven/article/details/108483784

本文详细介绍了ES模块的概念、导入导出语法以及动态导入的使用，包括在浏览器环境中的应用。文章指出，随着动态导入的引入，代码拆分和按需加载成为可能，这对优化应用性能具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES 模块是什么？

ECMAScript模块（简称ES模块）是一种JavaScript代码重用的机制，于2015年推出，一经推出就受到前端开发者的喜爱。在2015之年，JavaScript 还没有一个代码重用的标准机制。多年来，人们对这方面的规范进行了很多尝试，导致现在有多种模块化的方式。

你可能听说过AMD模块，UMD，或CommonJS，这些没有孰优孰劣。最后，在ECMAScript 2015中，ES 模块出现了。

我们现在有了一个“正式的”模块系统。

ES 模块无处不在？

理论上，ES 模块应该在所有JavaScript环境中。实际上，ES 模块的主要应用还是在浏览器上。

2020年5月，Node.js v12.17.0 增加了在不使用标记前提下对ECMAScript模块的支持。这意味着我们现在可以在Node.js中使用import和export，而无需任何其他命令行标志。

ECMAScript模块要想在任何JavaScript环境通用，可能还需要很长的路要走，但方向是正确的。

ES 模块是什么样的

ES 模块是一个简单的文件，我们可以在其中声明一个或多个导出。以下面utils.js为例:

// utils.js
export function funcA() {
   
   
  return "Hello named export!";
}

export default function funcB() {
   
   
  return "Hello default export!";
}

这里有两个导出。

第一个是命名导出，后面是export default，表示为默认导出。

假设我们的项目文件夹中有一个名为utils.js的文件，我们可以将这个模块提供的对象导入到另一个文件中。

如何从 ES模块导入

假设我们在项目文中还有一个Consumer.js的文件。要导入utils.js公开的函数，我们可以这样做：

// consumer.js
import {
   
    funcA } from "./util.js";

这种对应我们的命名导入方式.

如果我们要导入 utils.js 中的默认导出也就是 funcB 方法，我们可以这样做：

// consumer.js
import {
   
    funcA } from "./util.js";

当然，我们可以导入同时导入命名和默认的：

// consumer.js
import funcB, {
   
    funcA } from "./util.js";

funcB();
funcA();

我们也可以用星号导入整个模块：

import * as myModule from './util.js';

myModule.funcA();
myModule.default();

注意，这里要使用默认到处的方法是使用 default() 而不是 funcB()。

从远程模块导入：

import {
   
    createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";

const store = createStore(/* do stuff */)

浏览器中的 ES 模块

现代浏览器支持ES模块，但有一些警告。要使用模块，需要在 script 标签上添加属性 type，对应值为 module。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECMAScript modules in the browser</title>
</head

最低0.47元/天解锁文章

200万优质内容无限畅学