babel本地編輯環境搭建

伊澤瑞爾發表於2018-08-26
Babel

babel本地編輯環境搭建

今天講的是babel搭建本地環境，眾所周知，現如今，javascript已經發布了es7版本，但是目前環境大多數只能支援到es5，連nodejs也不能完全支援es6，es7。今天將的babel能將我們寫的es6，es7的程式碼轉換成es5，從而讓現有環境能好好執行我們的js。

1.babel安裝

babel是通過npm安裝的，npm是node上的一個模組，所以環境要求，先要安裝node.js，然後安裝npm，之後再安裝babel-cli(babel命令列工具)。node.js下載地址：nodejs.org/dist/ 選擇對應的版本安裝，最新版的內建了npm模組。

node上傳

檢視版本node和npm版本號：

檢視版本

babel-cli安裝，國內環境建議將npm的源快取淘寶的再安裝。

npm config set registry https://registry.npm.taobao.org/
npm config get registry
複製程式碼

輸入npm install babel-cli -g來全域性安裝babel-cli，然後檢視到了版本表示安裝成功了。

npm install babel-cli -g
babel -V
複製程式碼

babel安裝成功

2.使用

我們先找一個目錄，然後用npm來初始化一個專案，用來搭建我們的babel環境。

搭建

我們進到剛才的babel目錄，然後開啟命令列工具輸入一些命令來驗證一下我們的環境。

babel-node
(a => a + 1)(2)
3
複製程式碼

編譯

可以看到，上面我們順利執行了一個es6的箭頭函式。這裡babel-node是babel提供的一個編譯工具，可以採用命令列方式執行我們的js程式碼，下面我們在用babel-node執行一個js檔案。我們進入工程目錄babel並新建index.js，並輸入以下程式碼。

let a = [1,2,3];
a.map((row) => {
	console.log(row)
})
複製程式碼

然後在命令列輸入以下命令。

執行js

可以看到，babel-node執行了我們es6的程式碼。下面將通過一些配置，來完善我們的babel環境。

3配置

我們在babel目錄新建.babelrc，Windows下可以用如下命令建立。

echo. > .babelrc
複製程式碼

用記事本開啟，輸入以下內容

{
    "presets": ["es2015", "stage-2"],  //設定轉碼規則
    "plugins": ["transform-runtime"]  //設定外掛
 }
複製程式碼

這裡我們配置好了babel的轉碼規則，轉碼成es2015.官方提供以下的規則集，可以根據需要安裝：

# ES2015轉碼規則
npm install --save-dev babel-preset-es2015

# react轉碼規則
npm install --save-dev babel-preset-react

# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
複製程式碼

這裡我們只需要轉換成es2015，這裡我們安裝我們需要的部分： npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev ，如需其他配置，可以修改.babelrc檔案，然後安裝上面對於的外掛。我們再開啟我們babel專案下的package.json檔案，做如下修改。

{
  "name": "babel",
  "version": "1.0.0",
  "description": "a babel project",
  "main": "index.js",
  "scripts": {
    "build": "babel src -w -d lib" 
    //編譯整個 src 目錄並將其輸出到 lib 目錄。這裡的src指的是需要轉換的目錄，lib指的是輸出的內容的存放目錄，-w其實是-watch的意思，就是監聽檔案，實時編譯輸出
  },
  "keywords": [
    "babel"
  ],
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  }
  "author": "zhujie",
  "license": "ISC"
}
複製程式碼

現在我們在babel工程目錄下新建src目錄和lib目錄，記得一定要建，不然會報錯，然後我們啟動我們的babel工程。命令號輸入npm run build。這樣就啟動了我們的babel實時編譯功能。這裡可以是在在src目錄新建main.js，然後輸入

//非同步載入圖片
let d;
function loadImageAsync(url){
    return new Promise((resolve,reject) => {
        const image = new Image();
        image.onload = function(){
            resolve(image);
        };
        image.onerror = function(){
            reject(new Error('error'));
        }
        image.src = url;
    });
}
複製程式碼

然後我們開啟lib目錄下的mina.js,可以看到程式碼已經被轉換。

'use strict';

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//非同步載入圖片
var d = void 0;
function loadImageAsync(url) {
    return new _promise2.default(function (resolve, reject) {
        var image = new Image();
        image.onload = function () {
            resolve(image);
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}
複製程式碼

大功告成！

總結

文中搭建了一個babel能轉換es6，es7語法的工程，適應大多數環境，對於不想有太多累贅，僅僅想使用es6，es7語法的情況下是夠用的，但是babel其實還有很多功能，babel-register,babel-core,babel-polyfill等工具。這裡不做詳解，有問題的可以郵件我，15972806478@163.com

最後可以掃描圖中二維碼來關注我的個人公眾號，每天釋出各種相關技術。

公眾號

相關文章