本節我們來學習如何安裝 Babel。安裝 Babel 後我們就可以將使用 ES2015 + 語法的 JavaScript 應用程序代碼，編譯爲可在當前瀏覽器中使用的代碼。本教程我們學習 Babel7 版本的知識。
準備工作
Babel 是基於 Node.js 的，如果我們要安裝 Babel ，那麼需要先安裝好 Node.js。
Node.js 的官網地址：https://nodejs.org/en/。然後按照提示進行安裝即可。
安裝好後，我們可以在命令工具中輸入 node -v 和 npm -v 來檢測一下 Node.js 和 npm 是否安裝成功，如果出現版本號則表示安裝成功，如果所示：
創建項目
首先我們來創建一個項目，在命令工具中使用 cd 命令進去指定路徑，在指定路徑下執行如下命令：
mkdir my_babel
命令執行完畢後，指定路徑中會成功創建一個名爲 my_babel 的文件夾，如下圖： 
然後需要使用 cd 命令進入這個項目路徑，接着執行初始化命令：
npm init
在 node 開發中執行上述命令會生成一個 pakeage.json 文件，這個文件主要是用來記錄這個項目的詳細信息的，它會將我們在項目開發中所要用到的包，以及項目的詳細信息等記錄在這個項目中。在以後的版本迭代和項目移植的時候會更加的方便。並且使用 npm init 初始化項目還有一個好處，就是在進行項目傳遞的時候不需要將項目依賴包一起發送給對方，對方在接受到你的項目之後再執行 npm install 就可以將項目依賴全部下載到項目裏。
如下圖所示，執行命令後會讓我們填寫一些配置信息，如果還不知道怎麼填寫的話可以一路回車： 
如果想要所有的配置項都選擇默認選項，可以直接執行 npm init -y 命令，這樣能快速生成一個 package.json 文件。
package name：字段表示項目名稱。version： 表示版本號。description： 表示對項目的描述。entry point：項目的入口文件。test command：項目啓動的時候要用什麼命令來執行腳本文件。git repository：如果你要將項目上傳到git中的話，那麼就需要填寫git的倉庫地址。keywirds：項目關鍵字。author：作者的名字。license：發行項目需要的證書。
開始使用
我們在使用 Babel 之前，大致瞭解一下 Babel 的各個組成部分，下面是 Babel 中一些常用的重要部分：
@babel/cli@babel/core@babel/preset-env@babel/polyfill@babel/runtime@babel/plugin-transform-runtime@babel/plugin-transform-xxx
主要注意的是 @ 符號，這個符號是 babel7 纔有的特性，這是 babel7 的一個重大調整，原來的 babel-xx 包統一遷移到 babel 域下，而域由 @ 符號來標識。
例如要安裝 Babel CLI，如果在 babel6 是沒有 @ 符號的，如下命令如下所示：
npm install --save-dev babel-cli
而換成 babel7 ，則變需要安裝 @babel/cli ，命令如下所示：
npm install --save-dev @babel/core @babel/cli
@babel/cli 是 babel 提供的內建的命令行工具，主要是提供 babel 這個命令來對 js 文件進行編譯。Babel 的核心功能位於 @babel/core 模塊中。
當我們執行這個命令後，效果如下所示： 
其中 --save 表示在項目內安裝，不是全局安裝。-dev 是開發環境，開發時需要依賴，正式上線時不需要依賴的。不使用全局安裝 Babel CLI，是因爲可能同一計算機中不同項目可能需要不同版本的 Babel，這樣更新也更加方便。
安裝成功後，@babel/cli 會添加到 package.json 文件中的 devDependencies 依賴中，例如：
"devDependencies": {
"@babel/cli": "^7.11.5",
"@babel/core": "^7.11.5"
}
如果我們想成功使用 Babel 將 es6 轉化爲 es5，還需要可以安裝一個 @babel/preset-es2015 預設：
npm install --save-d @babel/preset-es2015
如下圖所示： 
但此時還不能成功編譯代碼，如果要進行代碼編譯，我們需要在項目根目錄創建一個 .babelrc 配置文件，並定義安裝好的預設。
我們執行如下命令創建配置文件：
type nul>.babelrc
在文件中添加參數：
{
"presets": ["es2015"],
"plugins": []
}
這樣我們就可以執行 npx babel index.js 命令來編譯代碼了，index.js 是需要編譯的 .js 文件。
腳本命令設置
除了使用 npx babel 命令直接運行 Babel，我們可以直接將命令放入使用本地版本的 npm 腳本中。只需要 在 package.json 文件中的 scripts 字段中添加一個字段即可。
例如下列命令表示編譯整個 src 中的文件並輸出到 lib 文件夾中，添加如下命令後就可以 build 編譯代碼啦：
"scripts": {
"build": "babel src -d lib"
},
示例：
我們可以來試一下效果，例如我們在 src 文件夾中創建一個 index.js 文件，並寫入如下內容：
var add = (x, y) => x + y;
然後在命令工具中執行 npm run build 命令：
> npm run build
此時 lib 文件夾下也會生成一個 index.js 文件，這個文件中的內容是編譯後的代碼，如下所示：
"use strict";
var add = function add(x, y) {
return x + y;
};