详解import导入和export和export default导出的区别

        在项目中，我们经常会看到使用 import xx  from 'xxx'; 或者 import {xx}  from 'xxx'; 进行模块的导入，那对于在导入模块的时候什么情况下添加花括号 {} 什么情况下直接导入，这两种写法的区别又是什么呢？今天这篇文章主要解决关于模块导入导出的各种疑惑和疑难杂症。

一、背景

        在ES6之前，社区制定的模块加载方案主要有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。

        ES6在语言标准的层面上，实现了模块功能，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

二、import、export和export default的应用场景

        模块是一种封装了特定功能的代码的单元。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。若要实现外部能够读取模块内部的某个变量，就必须使用export/export default 关键字输出该变量。

        在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等。

        import用于在一个文件中倒入另一个文件中用export或者export default导出的模块。

三、区别

1、export与export default均可用于导出常量、函数、文件、模块等；

2、在一个文件或者模块中，export、import可以有多个，export default仅有一个（但是一个export default可以借助{}在该文件中导出多个默认子模块）；

3、通过export方式导出，在import导入时要加{}，export default在导入时不需要，并可以任意起名称。

4、通过export default导出一个模块中的多个子模块时，在用import 导入后，需要使用导出时的某个子模块的话，需要用import导入时的变量点.出来，即若用import导出export default时的模块命名为a，需要用到导出的a中的b，则使用时需要用a.b来调用b变量。