一、認識Babel

使用Babel官網https://www.babeljs.io/提供的在線編譯器;

Babel是什么：

Babel是javaScript的編譯器，用來將ES6的代碼，轉換成ES6之前的代碼，

Babel本身可以編譯ES6的大部分語法，比如let/const/箭頭函式/類，但是對于ES6新增的API，比如Set、Map、Promise等全域物件，以及一些定義在全域物件上的方法（比如Object.assign/Array.from）都不能直接編譯，需要借助其它的模塊，

Babel一般需要配合Webpack來編譯模塊語法，

Babel的使用方式

前言

重點：知道如何從官網查找Babel在相應工具上的使用方式，

進入Babel官網https://www.babeljs.io/，點擊Setup，以下就是Babel在不同工具中的使用方式說明，我們重點掌握的是CLI(命令列工具)和Webpack中Babel的使用

一個簡便的打開命令列的方式：打開檔案夾，在檔案夾路徑處點擊，輸入cmd,按回車鍵

1.使用Babel前的準備作業

要使用Babel需用到Node.js,要安裝Babel需用到npm，所以我們先來學習：什么是Node.js和npm?

1.1：什么是Node.js和npm?

Node.js是一個平臺或者說工具，我們在Node.js這個平臺上可以使用一門語言來開發，這門語言實際上是后端JavaScript語言，后端JavaScript = ECMAScript + IO + File + ...等服務器端的操作，很多時候我們把后端JavaScript稱為Node.js，

npm是node的包的管理工具，可以認為是Node.js平臺的插件的管理工具，我們可以使用nom去安裝node的插件，為了方便用戶操作包，npm提供了一些命令，可以直接在命令列中操作包

1.2：安裝Node.js

打開nodejs的中文官網：https://nodejs.org/zh-cn/，點擊下載長期支持版

檢測是否安裝成功

1.3：初始化專案

使用命令：npm init來初始化專案

package name:只能用英文名

后面的version/description等可以使用默認值，直接按回車，然后我們可以看到檔案里面多了個package.json檔案，以后我們使用npm安裝的包將會被記錄在這里，

如果以后我們換電腦操作，我們只需要拷貝這個檔案，就能把需要的包通過npm install(在package.json檔案里查看，把之前安裝過的包重裝一遍)命令安裝，

1.4：安裝Babel需要的包

在Babel官網找到相對應的安裝命令，ctrl+c復制，在命令列點擊右鍵就能粘貼進來，這里以安裝CLI需要的包示例：（--save-dev 表示的是開發時依賴，也就是說只會在開發的時候用到）

以上@后面是包名，如果不指定穩定的版本，會默認下載最新版本，有可能由于用法更改了，導致無法像之前那樣使用，所以我們最好安裝一個穩定的版本，示例：

二、使用Babel編譯ES6代碼

步驟：

1. add a `"scripts"` field to your `package.json`

在package.json中添加 "build": "babel src -d lib"，創建命令build,作用是使用babel編譯src目錄下的檔案輸出到lib中，

此時我們使用 npm run build 命令是不能將src目錄下的檔案轉換成功的，原因是我們還沒配置babel，

2.首先要下載一個包：

To start, you can use the env preset, which enables transforms for ES2015+

3.創建一個.babelrc檔案，寫以下代碼配置:

In order to enable the preset you have to define it in your .babelrc file, like this:

此時我們使用 npm run build，打開lib檔案會發現轉換成功了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294233.html

標籤：其他

上一篇：javascript實作五大排序演算法（冒泡排序、選擇排序、插入排序、希爾排序、快速排序）j

下一篇：講講ref參考

Babel