如今，我们无法想象没有Javascript的互联网，有些网站几乎完全使用Javascript构建的。为了使Javascript更具模块化、简洁性和可维护性，ES6引入了一种在Javascript文件之间轻松共享代码的方法。这涉及使用模块导出文件的一部分以供一个或多个其他文件使用，并在需要的地方导入所需的部分。
在本文中，将通过一些简单且实用的示例来学习Javascript中的ES6的模块。
什么是ES6模块？
模块使我们可以将代码库分成多个文件，以提高可维护性，也避免将所有代码放入一个大文件中。
为了达到这个效果，需要在HTML文档中使用一种 module 类型创建脚本。
如下代码所示：
<script type="module" src="devpoint.js"></script>
使用此 type="module" 引入的脚本就可以使用 import 和 export 功能。
export / import
用模块来组织代码，目的是提高代码的复用性，模块的代码通过export对外暴露，对应通过import 就可以引用了。
假设在一个名为index.js的文件中有一个代码块，并且想要在多个不同的文件中使用该特定的代码块。可以通过导出该代码块，然后将其导入其他文件来实现。
请看下面的示例，在该示例中导出了函数 multiple 和 add：
export const multiply = (x, y) => {
return x * y;
};
export const add = (x, y) => {
return x + y;
};
也可以通过以下示例达到相同的要求：
const multiply = (x, y) => {
return x * y;
};
const add = (x, y) => {
return x + y;
};
export { multiply, add };
至于使用哪种方式组织代码，没有太大的区别，个人偏向第二种代码风格。当然导出不一定是函数，变量也是可以的。下面就来看下导入的代码示例：
import { multiply, add } from "./index";
console.log(multiply(1, 2));
console.log(add(1, 2));
加入需要引入的方法比较多的情况，没必要每个方法都写一遍，可以通过下面的方式，做一个统一的入口：
import * as mathHelper from "./index.js";
console.log(mathHelper.multiply(1, 2));
console.log(mathHelper.add(1, 2));
export default
仅当从文件中导出一个值或一个功能时，才可以使用 export default，我们把上面的代码稍微改一下：
// 命名函数
export default function multiply(x, y) {
return x * y;
}
// 匿名函数
export default function (x, y) {
return x * y;
}
只需使用 import 即可导入上面的函数，导入代码如下：
import multiply from "./index.js";
console.log(multiply(1, 2));
从上面我们可以看出区别，导入 export default 定义的函数 multiply 不需要花括号 {} ，无论文件index.js的 export default 是什么，在这里 multiply 只是一个函数名或者变量名。导入 export default 定义，可以在导入时候使用任何名称。如下的方式也是对的：
import multiplyHelper from "./index.js";
console.log(multiplyHelper(1, 2));
export default 和 export 区别
export与export default都可用于导出常量、函数、文件、模块等- 在一个文件或模块中，
export/import可以有多个，export default只能有一个 - 通过
export方式导出的模块，在导入时要加花括号{ }；而export default则不需要加花括号
总结
Javascript中的ES6模块允许将Javascript代码导出和导入到不同的文件中，这有助于将代码分解为更小的粒度文件，提高代码的复用性，从而减少代码代码冗余，也能让代码更简洁。
