彻底弄懂Javascript模块导入导出

　　笔者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试
　　比如importxxfromtest。js不起作用，就加个括号import｛xx｝fromtest。js
　　反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂
　　尤其是在当初写www。helloworld。net网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候
　　这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识首先要知道export，import是什么
　　我们知道，JS模块导入导出，使用import，export这两个关键字export用于对外输出本模块import用于导入模块
　　也就是说使用export导出一个模块之后，其它文件就可以使用import导入相应的模块了
　　下面我们具体看看，import和export到底怎么用？怎么导出模块（比如变量，函数，类，对象等）
　　1导出单个变量a。js导出一个变量，语法如下exportvarsitewww。helloworld。netb。js中使用import导入上面的变量import｛site｝from。a。js路径根据你的实际情况填写console。log（site）输出：www。helloworld。net
　　2导出多个变量
　　上面的例子是导出单个变量，那么如何导出多个变量呢a。js中定义两个变量，并导出varsiteUrlwww。helloworld。netvarsiteNamehelloworld开发者社区将上面的变量导出export｛siteUrl，siteName｝b。js中使用这两个变量import｛siteUrl，siteName｝from。a。js路径根据你的实际情况填写console。log（siteUrl）输出：www。helloworld。netconsole。log（siteName）输出：helloworld开发者社区3导出函数
　　导出函数和导出变量一样，需要添加｛｝a。js中定义并导出一个函数functionsum（a，b）｛returnab｝将函数sum导出export｛sum｝b。js中导入函数并使用import｛sum｝from。a。js路径根据你的实际情况填写console。log（sum（4，6））输出：10
　　4导出对象
　　js中一切皆对象，所以对象一定是可以导出的，并且有两种写法4。1第一种写法
　　使用exportdefault关键字导出，如下a。js中，定义对象并导出，注意，使用exportdefault这两个关键字导出一个对象exportdefault｛siteUrl：www。helloworld。net，siteName：helloworld开发者社区｝b。js中导入并使用importobjfrom。a。js路径根据你的实际情况填写console。log（obj。siteUrl）输出：www。helloworld。netconsole。log（obj。siteName）输出：helloworld开发者社区
　　4。2第二种写法
　　同样是使用exportdefault关键字，如下a。js中定义对象，并在最后导出varobj｛siteUrl：www。helloworld。net，siteName：helloworld开发者社区｝exportdefaultobj导出对象objb。js中导入并使用importobjfrom。a。js路径根据你的实际情况填写console。log（obj。siteUrl）输出：www。helloworld。netconsole。log（obj。siteName）输出：helloworld开发者社区5导出类
　　导出类与上面的导出对象类似，同样是用exportdefault关键字，同样有两种写法5。1第一种写法a。js中定义一个类并直接导出exportdefaultclassPerson｛类的属性sitewww。helloworld。net类的方法show（）｛console。log（this。site）｝｝b。js中导入并使用导入类importPersonfrom。a。js创建类的一个对象personletpersonnewPerson（）调用类的方法person。show（）输出：www。helloworld。net5。2第二种写法a。js中定义一个类，最后导出classPerson｛类的属性sitewww。helloworld。net类的方法show（）｛console。log（this。site）｝｝导出这个类exportdefaultPersonb。js中导入并使用导入类importPersonfrom。a。js创建类的一个对象personletpersonnewPerson（）调用类的方法person。show（）输出：www。helloworld。net小结
　　下面我们简单总结一下
　　export与exportdefault的区别export与exportdefault均可用于导出常量、函数、文件、模块等可以在其它文件或模块中通过import（常量函数文件模块）名的方式，将其导入，以便能够对其进行使用exportdefault后面不能跟const或let的关键词export、import可以有多个，exportdefault仅有一个。通过export方式导出，在导入时要加｛｝，exportdefault则不需要export具名导出xxx，exportdefault匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，exportdefault只能导出当前模块，一个js文件中只支持出现一个
　　对于import，export，exportdefault，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看
　　最重要的还是要明白为什么要这么写，实在不明白记住就行了。