ES10 中使用 import/export，升级你的代码-JavaScript中文网-JavaScript教程资源分享门户

概述

ES10 引入了 import/export 语法，以取代之前使用的 CommonJS require/module.exports 语法。这个新的语法支持了更多的功能，例如异步加载模块、命名导出、导入全局变量等，因此能够帮助我们更好地组织和管理我们的前端代码。

本篇文章将详细介绍 import/export 的各种用法，以及如何用它们来升级你的代码。

ES10 中，我们可以使用以下语法来从一个模块中导入一个或多个名称：

import { name1, name2 } from 'module-name';

其中 name1 和 name2 是我们需要从模块中导入的变量名，module-name 则是我们想要导入的模块的名称。

我们也可以使用以下语法来导入整个模块：

import * as myModule from 'module-name';

这样我们就可以使用 myModule 对象来访问该模块中导出的所有变量和函数。

ES10 中，我们可以使用以下语法来导出一个或多个变量或函数：

export const name1 = ...;
export const name2 = ...;
export function functionName() { ... }

这些变量或函数可以通过 import 语法导入。

我们也可以给导出的变量或函数命名，这样在导入时我们不必使用相同的变量名：

// in module myModule.js
export { name1 as foo, name2 as bar };

// in other module
import { foo, bar } from 'myModule';

这里 name1 和 name2 分别被导出成了 foo 和 bar。

我们也可以使用以下语法来从一个模块中导入其默认导出：

import myDefault from 'module-name';

这里 myDefault 是模块中的默认导出值，而 module-name 则是我们正在导入的模块的名称。

ES10 中，我们可以使用以下语法来导出默认值：

export default expression;

这里 expression 可以是任何 JavaScript 表达式，然后当使用 import 导入该模块时，可以使用以下语法访问默认值：

import myDefault from 'module-name';

ES10 中，我们可以使用以下语法来动态加载一个模块：

import('module-name').then(module => { ... });

这个语法支持异步的模块加载，使我们能够动态地加载模块。

ES10 中，我们可以使用以下语法来从全局变量中导入变量：

import $ from 'jquery';

这里 jquery 是一个全局变量，我们使用了 import 语法将其导入。这个语法是 CommonJS require 语法的替代品。

在 ES10 中，我们可以使用 import/export 语法来更好地组织和管理我们的前端代码。我们可以使用 import 语法来导入模块或导入全局变量，使用 export 语法来导出变量或函数，以及使用动态导入来异步加载模块。

通过学习和使用这些语法，我们能够更好地升级我们的前端代码，提高代码质量和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64791c3a968c7c53b052caf5