babel來進行js轉換

一.babel 含義:

通天塔, 取統一人類的行動中的統一的意思. 

1.將各種我們日常開發中用的順手的語言(比如es6, typescript ...) 編譯成 不同版本瀏覽器能識別的 語言;

2. babel本身只是分析, 真正的語言轉換交給外掛程式來完成

二 安裝 :

1.安裝命令: npm install @babel/core @babel/cli -d 

其中@表示命名空間. 第乙個是babel的核心庫, 第二個是babel的cli工具,

核心庫是具體的執行**提供api, cli庫是命令列工具, 我們人工來呼叫核心庫的工具

2. 兩種編譯命令: npx bebal 原始檔 -o 輸出檔案 [-w]

npx bebal 源目錄 -d 輸出目錄 [-w]

-o 表示output輸出   

如:  npx babel js/index.js -o dist/index.js     npx babel js -d dist

-w 表示watch;監聽

三 配置

babel如果不配置, 不會做任何事情, 真正的編譯要依託babel外掛程式和babel預設完成.

1 配置檔案 .babelrc.json 或者 .babel.config.json 或者配置到package.json檔案中. 三者選一種即可(檔案字尾名.json可以省略)

//.babelrc.json檔案

1檔案

8 }

常用的babel預設是 @babel/preset-env;  乙個普通的vue工程，babel官方的preset只需要配乙個"@babel/preset-env"就可以了。

2. 再配置到配置檔案中:

3. 設定匹配瀏覽器版本

通過.browserslistrc檔案或者package.json裡的browserslist選項, 設定瀏覽器對相應版本

//

.browserslistrc檔案
last 3
version
> 1%not ie 
<= 8

因為babel只針對js的新語法有編譯功能, 對新的api無效, 需要單獨設定

1

//.browserlistsrc檔案27
]],8
"plugins": 
9 }

1

檔案2const a = 1;3
new promise((res,rej)=>)

1

//編譯後的檔案2"
use strict";
34 require("
core-js/modules/es6.object.to-string.js");
56 require("
core-js/modules/es6.promise.js");
78var a = 1;9
newpromise(function (res, rej) );

用新語法=>需要通用的工具babel=> 需要預設preset=> 需要設定: 在.babelrc中設定;

五. babel外掛程式:

執行順序: 原始碼 -> plugins 外掛程式 -> preset 預設 -> 編譯後的**

使用方法:(以去除console.log外掛程式為例)

1, 先npm i -d babel-plugin-transform-remove-console

2 註冊查外掛程式

1

//.babelrc.json檔案28
]],9
"plugins
": ["
babel-plugin-transform-remove-console"]
10 }

常見到的外掛程式@babel/plugin-transform-runtime

作用, 將babel在各檔案中生成的各種函式提取出來, 作為公用的**,在各檔案中引用.

如右側的async 關鍵字會編譯成為左邊的兩個函式, 這樣通過安裝該外掛程式, 這兩個函式會被生成到乙個單獨的檔案中

五 .webpack中使用babel;

2. 在webpack配置檔案webpack.config.js裡配置出檢測js檔案的配置

1 module.exports =12]

13}14 }

17]]

8   ,"
plugins
": ["
@babel/plugin-transform-runtime"]
9 }

babel 對 ECMAModule的轉換

首先會在 exports 物件上定義 esmodule 屬性，標誌這是使用 esmodule 的匯出。object.defineproperty exports,esmodule 如果是使用export匯出，那麼會將屬性掛在 exports.上，如果使用的是export default上，那麼會將屬...

一文搞定babel轉換

code轉換為ast 遍歷ast樹 進行修改 還原為code targets支援哪些瀏覽器 babel polyfill是將整個es2015 環境引入到全域性中，會造成全域性汙染require core js modules set 改變了原型，所以可以在例項上使用方法 通過配置usebuiltin...

react 進行babel轉化jsx執行之後報錯

在進行react的專案搭建的過程中，搭建到babel轉化jsx語法，然後就爆了如下的各種錯誤 比如 終端執行 cnpm i babel core babel loader babel plugin transform runtime d cnpm i babel preset env babel p...