Babel初體驗

原文地址：→傳送門

寫在前面

如今es6很流行，儘管各大瀏覽器都還不能支持它的新特性，可是小夥伴們仍是很中意它呀，因而小小的學習的一下

Babel

這裏咱們不介紹es6相關內容，只是說下入坑前奏，記錄下如何使用babel來對es6進行轉碼~

1.準備一個項目（文件夾）

進入到你的項目根目錄下，使用下面命令初始化生成一個package.json文件

npm init

2.安裝babel
使用下面命令安裝全局babel-cli
npm install --global babel-cli

3.設置轉碼規則並安裝插件
安裝相關插件：

# 最新轉碼規則
$ npm install --save-dev babel-preset-latest

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

如今根目錄下新建一個.babelrc文件並添加以下內容：

{
    "presets":[
        "latest",
        "react",
    ],
    "plugins": []
}

新建一個src文件用於放ES6的代碼，再新建一個lib文件用於存放轉碼後的代碼，而後在src文件中新建一個index.js文件，裏面放點es6的代碼

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x);
console.log(y);
console.log(z);

這時候輸入下面的命令就能夠直接對index.js進行轉碼了額~

babel src/index.js --out-file lib/index.js
或
babel src/index.js -o lib/index.js

同時也能夠使用 --watch或-w 對轉碼文件進行監測文件內容的變化：

babel src/index.js --watch -o lib/index.js
babel src/index.js -w -o lib/index.js

可是，若是src中有多個文件的話，上面這樣就很繁瑣，接下來要使用babel的命令來對文件夾下的.es六、.js等全部文件進行轉碼:

babel src -d lib

同時可將這行命令配置到package.json中的scripts中：

"scripts": {
    "compile":"babel src -d lib"
  },

下一次則直接使用npm run compile便可完成編譯。

也能夠使用watch對文件夾進行監測:

"scripts": {
    "compile": "babel src -d lib",
    "watch-compile": "babel src -d lib --watch"
  },

使用npm run watch-compile命令就只有執行一次，就能夠開開心心寫ES6了~