[[346483]]

 ES6轉(zhuǎn)ES5（第一種）
初始化項(xiàng)目

npm init --y 

安裝依賴

npm install babel-cli -D 

npm install babel-preset-es2015 -D 

在項(xiàng)目中創(chuàng)建并編輯ES6文件
這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

// src/index.js 
let a = 1; 
 
let fun = ()=>{ 
    console.log(a); 
} 

編輯package.json
我們需要自己在scripts字段里添加命令：

• build-t ：單獨(dú)編譯某個(gè)文件
• build-d：把一個(gè)文件夾內(nèi)的所有文件統(tǒng)一編譯到另一個(gè)文件夾里（文件夾自動(dòng)生成，不需要自己創(chuàng)建）
• build-o：把一個(gè)文件夾內(nèi)的指定文件編譯到另外的文件夾里（文件夾需要自己創(chuàng)建，可以指定文件名）

{ 
  "name": "babel01", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "build-t":"babel index.js --presets es2015", 
    "build-d": "babel src -d lib --presets es2015", 
    "build-o":"babel src/index.js -o dist/index.js --presets es2015" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1" 
  } 
} 

啟動(dòng)編譯

npm run <這里是scripts字段的命令> 

下面是編譯后的es5文件。

"use strict"; 
 
var a = 1; 
 
var fun = function fun() { 
    console.log(a); 
}; 

ES6轉(zhuǎn)ES5（第二種）
其實(shí)跟第一種差不多。

初始化項(xiàng)目

npm init --y 

安裝依賴

npm install babel-cli -D 

npm install babel-preset-es2015 -D 

在項(xiàng)目中創(chuàng)建并編輯ES6文件
這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

{ 
    "presets": ["es2015"], 
    "plugins": [] 
} 

編輯package.json
我們需要自己在scripts字段里添加命令，命令內(nèi)容與第一種方法的一樣，這里只不過省了--presets es2015。

{ 
  "name": "babel01", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
  "build":"babel src/index.js -o dist/index.js" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1" 
  } 
} 

啟動(dòng)編譯

npm run build 

下面是編譯后的es5文件。

"use strict"; 
 
var a = 1; 
 
var fun = function fun() { 
    console.log(a); 
}; 

ES6+轉(zhuǎn)ES5
這里 ES6+ 說的是ES6、ES7、ES8等。

初始化項(xiàng)目

npm init --y 

安裝依賴

npm install babel-cli -D 

npm install babel-preset-env -D 

在項(xiàng)目中創(chuàng)建并編輯ES6文件
這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

// src/index.js 
let a = 1; 
 
let fun = ()=>{ 
    console.log(a); 
} 

在項(xiàng)目中創(chuàng)建并編輯.babelrc文件
在根目錄下創(chuàng)建.babelrc文件。

{ 
    "presets": ["env"] 
} 

編輯package.json
命令內(nèi)容不只是這一個(gè)，根據(jù)你需求寫，其他命令可以看上面的ES6轉(zhuǎn)ES5（第一種）。

{ 
  "name": "babel01", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
  "build": "babel src -d dist" 
  }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1" 
  } 
} 

啟動(dòng)編譯

npm run build 

下面是編譯后的es5文件。

"use strict"; 
 
var a = 1; 
 
var fun = function fun() { 
    console.log(a); 
}; 

結(jié)語
本篇主要介紹了ES6轉(zhuǎn)ES5的兩種方法以及ES6+怎樣轉(zhuǎn)ES5。不過現(xiàn)在大部分使用ES6+怎樣轉(zhuǎn)ES5比較多，主要讓大家體驗(yàn)下升級(jí)的感覺。