webpack組織模塊打包Library的原理及實現(xiàn)

這樣上面的模塊加載函數(shù)factory會在返回值后面加一個['default']，這樣就只返回exports的default部分。

這個坑在umd格式下其實還是挺容易踩到的，例如你發(fā)布一個Vue組件，.vue文件中的JavaScript部分一般都是把Component對象以export default的格式導出的，就像這樣：

export default {
 name: 'xxx',
 data: {
 return // ...
 },
 props: {
 // ...
 }
 methods: {
 // ...
 }
}

如果你把編譯后的JS文件直接放在瀏覽器里運行，并且用CDN的方式通過<script>加載Vue，你會發(fā)現(xiàn)Vue無法識別這個Component，因為你得到的這個對象多了一層不必要的default。

你可能會問如果我把輸出內(nèi)容改成了default，會不會影響這個模塊在ES6環(huán)境下的使用？一般來說是不會的。之前一篇文章里已經(jīng)談到，Webpack的生成代碼在引入一個模塊時，會通過一個叫__esModule的值來設置和判斷它是不是ES6格式的export，現(xiàn)在如果只導出default部分，那么這個對象是被視為非ES6的，因為它不含__esModule。這樣其它模塊通過import來引入這個模塊時，會引入整個對象，這實際上變相地就等價于只引入原模塊的export default部分。

當然以上討論的前提是，你所有需要export的內(nèi)容全部都在export default里。如果你既有default，又有正常的export，那編譯后的文件只導出default部分顯然是不行的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com