首先要知道export，import ，export default是什么

ES6模塊主要有兩個(gè)功能：export和import

export用于對(duì)外輸出本模塊（一個(gè)文件可以理解為一個(gè)模塊）變量的接口

import用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊。

也就是說(shuō)使用export命令定義了模塊的對(duì)外接口以后，其他JS文件就可以通過(guò)import命令加載這個(gè)模塊（文件）。這幾個(gè)都是ES6的語(yǔ)法。

export和import（一個(gè)導(dǎo)出一個(gè)導(dǎo)入）

一個(gè)a.js文件有如下代碼：

????????????????? export? var name="李四";

在其它文件里引用如下：

????????????????? import { name } from "/.a.js"http://路徑根據(jù)你的實(shí)際情況填寫(xiě)

上面的例子是導(dǎo)出單個(gè)變量的寫(xiě)法，如果是導(dǎo)出多個(gè)變量就應(yīng)該按照下邊的方法，用大括號(hào)包裹著需要導(dǎo)出的變量：

???????????????? var name1="李四";var name2="張三";

???????????????? export { name1 ,name2 }

在其他文件里引用如下：

???????????????? import { name1 , name2 } from "/.a.js"http://路徑根據(jù)你的實(shí)際情況填寫(xiě)

如果導(dǎo)出的是個(gè)函數(shù)呢，那應(yīng)該怎么用呢,其實(shí)一樣，如下：

??????????????? functionadd(x,y){ alert(x*y)//想一想如果這里是個(gè)返回值比如： return x-y，下邊的函數(shù)怎么引用}

??????????????? export { add }

在其他文件里引用如下：

????????????? ?? import { add } from "/.a.js"http://路徑根據(jù)你的實(shí)際情況填寫(xiě)

export與export default

看完上面這幾個(gè)例子，想必你一定了解了如何使用export，import,如果還是不懂可以自己動(dòng)手試一試。上面講的是export和import，但是export跟export default 有什么區(qū)別呢？如下：

1、export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等

2、你可以在其它文件或模塊中通過(guò)import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用

3、在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)

4、通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要

這樣來(lái)說(shuō)其實(shí)很多時(shí)候export與export

default可以實(shí)現(xiàn)同樣的目的，只是用法有些區(qū)別。注意第四條，通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export

default則不需要。使用export default命令，為模塊指定默認(rèn)輸出，這樣就不需要知道所要加載模塊的變量名。

原文地址：https://www.cnblogs.com/xiaotanke/p/7448383.html