webpack-問題記錄

1.爲什麼我們在寫前端代碼的時候,可以使用 process.env.NODE_ENV 這樣的代碼(process 不是 node 模塊麼?爲啥可以在瀏覽器下使用)?

因爲webpack有DefinePlugin的存在,在初始模板的時候,注入了全局process對象,所以瀏覽器可以用process對象。

2.爲什麼我們在寫前端代碼的時候,可以使用諸如 Buffer、setImmediate 等 node 纔有的全局對象(https://nodejs.org/api/globals.html#globals_clearimmediate_immediateobject)

Buffer其實都是基於typedArray實現的,v8是支持typedArray的。在瀏覽器中使用Buffer、setImmediate,只需要引入polyfill。

3.如果代碼中出現了 if (process.env.NODE_ENV === 'development') { // do something },在 production build 的代碼裏面,會有這段代碼麼,爲什麼?

打包的時候,這段代碼會被優化掉。因爲在編譯的時候,這段代碼就類似於 if(false) {},webpack在編譯的時候會對 if(false === false){} 或者 if (true === true){} 類似的代碼做標記,然後terser會刪掉這段邏輯。同樣,在代碼壓縮minify的時候,也會把類似if ('a'=== 'a'){} 這些邏輯優化掉。

4.axios 同時支持了 node 和 browser 環境,是怎麼支持的?打包的時候,兩個環境的代碼都會打包進去麼?

axios源碼裏面,有xhrAdapter和httpAdater,通過判斷當前是瀏覽器環境還是node環境,來決定使用哪個adapter。打包的時候,也只會把當前環境的adapter打包進去。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章