babel 對 ECMAModule的轉換

2021-10-09 23:12:03 字數 1365 閱讀 9886

首先會在 exports 物件上定義 __esmodule 屬性，標誌這是使用 esmodule 的匯出。

object.


defineproperty


(exports,


"__esmodule",)


;
如果是使用export匯出，那麼會將屬性掛在 exports.*** 上，如果使用的是export default上，那麼會將屬性掛在 exports.default 上。

對於commonjs由於是直接在 exports 物件上進行操作，如module.exports = {}、exports.*** = ***，所以不需要 babel 做額外處理。

所以commonjs和export都把值掛在module.exports上，在匯入的時候無區別，而export default會把值掛在module.exports.default上，在匯入的時候會去 default 上取值

對於匯入來說，既可以匯入commonjs也可以匯入esmodule。

使用非預設匯入時，對於使用commonjs的匯出方式和export的匯出方式時。如下:

import


from


'lodash'


clone()


等於下面這段**


const _lodash =


require


('lodash');


_lodash.


clone


()
如果使用預設匯入，對於使用commonjs的匯出方式和使用export default的匯出方式。預設匯入會被轉換如下：

import lodash from


'lodash'


lodash.


clone()


或被轉換成如下**


var _lodash =


_interoprequiredefault


(require


("lodash"))


;function


_interoprequiredefault


(obj);}


_lodash.


default


.clone()


;

Babel學習系列2 Babel設計,組成

第一篇 babel學習系列1 babel歷史 上篇講了 babel 的歷史，為了解決es6瀏覽器不支援的問題，這篇聊下babel的整個設計,基本組成 在 alloyteam 找的圖，ast abstract syntax tree,抽象語法樹 從圖上可以看到，babel 會將我們寫的 轉換ast 之...

專案配置 babel

一，外掛程式plugins 轉換外掛程式和語法外掛程式。如下 僅支援轉換箭頭函式，如果想將其它的新的js特性轉換成低版本，需要使用其它對應的 plugin 如果我們乙個個配置的話，會非常繁瑣，因為你可能需要配置幾十個外掛程式，所以。預設。babelrc 二，預設 preset babel prese...

babel常識備忘

乙個典型的babelrc配置 包括presets 與 plugins兩個字端。需要明確的點 1,es2015 es6 2,es2016 es7 3,es2016 es8 babel preset es2015 可以將es2015即es6的js 編譯為es5 babel preset es2016 可...