export 曝露
使用export可以曝露出方法、對象、字符串等等,如下代碼
那么,上面的代碼經(jīng)過babel的編譯后,變成可以執(zhí)行的node.js代碼,如下
看到上面的代碼我們知道了,es6的export會被轉(zhuǎn)成node.js中的exports的曝露方式。
import 導入
再來看下import的寫法,我們引入上面寫export的文件xx.js
第一種寫法
foo,qux是在xx.js中我們曝露出來的屬性,在xx.js中曝露出來的屬性有foo、bar、qux3個,由此可知這種寫法需要知道引入文件中曝露出來的屬性的名稱,并且可以按需要寫,不需要枚舉全部屬性。
下面我們來看下babel編譯后的代碼:
就是一個簡單的require方法,引入xx.js,所以用這種方式我們是可以引入es6的模塊也可以引入node.js模塊的。
第二種寫法
這里還是引入xx.js,這種寫法會把xx.js中曝露出來的屬性都賦值給xx這個變量(其實就是給module.exports起個別名),被babel編譯后如下下:
看到上面的代碼,有一個判斷是node模塊還是es模塊,這種寫法也是兼容es模塊和node的模塊的。
第三種寫法
在這種寫法中oo是隨意的變量,乍一看可能會覺的和第二種寫法一樣,其實不然,來看一下編譯后的代碼:
在最后一行,oo.bar被編譯成了_2.default.bar,多了一個default,這里的bar當然就找不到了,所以這種用法不是用來引入export的屬性的,而是下面要說的export default。
export default 曝露且一次性曝露
export與export default我會在別的文章總結(jié),這里我們只說export default的用法,下面來看代碼。
被babel編譯后
看到最后一行foo會被賦給exports.default,這樣正好對應上了import oo from './xx'這種寫法里面會調(diào)用default里面的屬性,所以這兩種用法對應使用。既然屬性的值是會賦給exports.default,那么就可以有下面的用法
上面的代碼是分開寫的,因為一個js里面只能使用一次export default,理由和使用module.exports一樣,除了不能寫多個,下面也是錯誤的寫法:
export default還可以用來曝露class這里不多說了,都是曝露。
其他的一些用法
繼承
這里說是模塊繼承,其實就是一個父模塊引入子模塊,然后又將子模塊曝露出來的屬性曝露出去:
被編譯后
注意下面這句
default屬性不向外曝露...這說明,我們的引入的xx.js這個文件里面用exports default是無效的,替代寫法是
繼承的寫法常用于組織多個模塊,經(jīng)常與下面要說的引包一起用
引文件夾(引包)
很多人不理解下面這行代碼
為什么import可以引入文件夾,注意不是什么文件夾都可以,里面至少有一個文件就是index.js或者有package.json和另外名字的js,因為文件夾里面有index.js那么這就不是一個文件夾而是node.js的包了(更多參見node.js包的文章),import會被babel編譯成require,require可以去引用指定路徑的包,因此,import可以去導入一個文件夾,我們可以依賴index.js將文件夾中的其他文件代碼導出,例如:
我們可以通過import oo這個文件夾得到1.js、2.js里面曝露出的屬性。
總結(jié)
從看babel編譯后的代碼,可以看出export與exports,module.exports與export default的用法的相似,至于用什么怎么用還是看個人喜好吧。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com