在 web 上使用 JavaScript 模块_web import js-优快云博客

本文介绍了JavaScript模块（ES模块）的基础知识，包括如何在代码中使用export和import关键字进行内容的导出与导入，以及Chrome团队如何进一步优化JS模块的使用体验。

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

现在所有主流现代浏览器都已经支持 JavaScript 模块。本文将介绍如何使用 JS 模块，如何有效地部署，以及 Chrome 团队如何使 JS 模块在未来变得更好用。

什么是 JS 模块？

JS 模块（也称为“ES 模块”或“ECMAScript模块”）是 ES6 中一项非常重要的语言特性。在此以前，你可能使用过用户级别的 JavaScript 模块系统，比如在 Node.js 中的 CommonJS，或者是 AMD，或者其他别的实现。所有的模块系统都包含一个共同点：允许导入和导出内容。

现在，JavaScript 拥有标准化的语法来完成这些事。在一个模块中，可以使用 export 关键字来导出任何内容，比如一个 const ，一个 function 或任何其他变量绑定或是声明。只需在变量语句或声明前面加上 export 即可：

//  lib.mjs

export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}
复制代码

然后可以使用 import 关键字从另一个模块导入模块。在这里，我们从 lib 模块导入 repeat 和 shout 函数，并在 main 模块中使用它们：

//  main.mjs

import {repeat, shout} from './lib.mjs';
repeat('hello');
// → 'hello hello'
shout('Modules in action');
// → 'MODULES IN ACTION!'
复制代码

还也可以从模块中导出 default 值：

原文链接