ES6 - Babel編譯環境搭建

都看到這裏了，我就不寫什麼node環境安裝之類的了。

直接重新建項目文件夾後開始吧！

 

安裝依賴：

命令行cd到項目文件夾以後，執行如下命令：（mac記得前邊加sudo）

• npm init –y  // 建立package.json

• npm install @babel/core @babel/cli @babel/preset-env  //安裝所需babel

 

依賴說明：

@babel/core：是整個功能中最核心的模塊。core就是核心的意思。

裏邊的一個核心功能就是transform，把js代碼編程抽象語法樹AST。只要變成抽象語法樹後，後期的插件才能根據這個抽象語法樹進行降級，轉成es5。

 

以上其主要功能是提供抽象語法樹，可是不提供降級，進行降級轉換es5語法的話還須要其餘一個插件：
@babel/preset-env：是一個插件集合，裏邊集成了不少插件，好比專門解析let、專門解析箭頭函數等的插件。他具有把全部的es6的語法都轉成es5的能力，可是此能力也依賴babel/core

 

把寫的es6語法真正轉成es5，須要一個指令去找到這個文件，編譯轉換後輸出新的文件，就須要這個腳手架。

@babel/cli：也是一個工具，經過命令行對js文件進行換碼。可讓你經過npx指令執行對應命令。

此時，執行npx babel es6.js -o es5.js，就能把es6語法轉換爲es5的格式。他的工做原理是經過node_modules/.bin/bable入口文件進行編譯。

 

配置文件：

若是上邊兩個都沒問題了，就在package.json同級目錄下新建文件： .babelrc

配置以下：

配置文件說明：

1. .babelrc是一個json對象文件。
1. 是一個嚴格的json文件，key必須用雙引號包裹。

2. presets：預設，數組、預設插件集合，實時增長。
1. "@babel/preset-env"： babel處理插件之一 

 

編譯es6文件，測試：

新建test.js文件，寫上es6命令

運行npx babel test.js –o demo.js 

編譯成功後，查看輸出的demo.js

 

使用監聽：

運行命令：npx babel test.js –o demo.js --watch

而後我在左邊編譯test，保存右邊就能輸出demo，真棒👍！！！

 

 

 

在線編譯： 

若是是臨時的babel編譯，不想配置腳手架工具的話，能夠打開這個在線工具編譯。

https://www.babeljs.cn

官網截圖