在前端开发中，模块化是一个十分重要的概念。ECMAScript 2015（ES6）引入了export/import命令用于导出和导入模块。而在ECMAScript 2021（ES12）中，export/import命令又有了新的特性和用法。本文将深入讲解ES12中export/import命令的相关知识，希望能给读者带来深度和指导意义。
Export命令
Export命令用于导出模块变量，在ES6中已经被广泛使用。在ES12中，Export命令除了可以直接导出变量外，还可以通过变量名模式匹配的方式进行批量导出。
直接导出变量
直接导出变量的语法如下：
export const myVariable = 'Hello World';
其中，const定义一个常量myVariable，并通过export命令导出。
批量导出变量
和ES6相比，ES12增加了对变量名模式匹配的支持，使得我们可以通过一行代码方便地批量导出多个变量。
以对象的形式导出多个变量：
export { myVariable1, myVariable2 };其中， myVariable1 和 myVariable2 是你想要导出的变量名。你需要在你的代码中定义这些变量并通过 export 命令导出。
以函数的形式导出多个变量：
export function myFunction() {
// ...
}
export class myClass() {
// ...
}在一个模块中可以同时包括上述两种形式的批量导出语句。
Import命令
与Export命令类似，ES12也为Import命令增加了一些新的特性和用法。
直接导入
直接导入命令需要使用原始语法 (try with axios):
import axios from 'axios';
其中，axios是一个由外部模块提供的变量（对象），并且将被绑定到当前作用域中。要导入的模块名必须是放置模块的路径。如果模块位于该脚本的相对目录中，则必须包含相对路径。
值得注意的是，当你想导入的模块是一个函数或者类时，需要用花括号{}来包裹模块中的变量名：
import { myFunction } from './my-Module.js';批量导入
ES6只支持一次导入一个模块，而ES12支持批量导入。你可以在同一行 import 语句中导入多个模块：
import { var1, var2 } from 'my-Module';批量导入的方式是 导入{ } 中的每个变量（或者对像）中逗号划分的集合。
与导出变量名一样，导入变量名也可以使用通配符来实现批量导入，如下面的代码所示：
import * as myModule from './my-Module.js';
其中的*号表示导入所有的变量/对象。该方法需要命名空间。这种方式比较适用于过多的导出的情况下。
总结
本文深入学习了ES12中的Export/import命令，并详细介绍了它们的新特性和用法。export/import命令提供了一种方便快捷地模块管理方式，能够减少代码冗余度并提高代码可读性维护性。希望读者在模块化开发中能够充分利
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529a9237d4982a6ebc1d3b3