ES6轉ES5的兩種方法以及ES6怎樣轉ES5

這篇文章給大家介紹ES6轉ES5的兩種方法以及ES6怎樣轉ES5，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

 ES6轉ES5（第一種）
初始化項目

npm init --y

安裝依賴

npm install babel-cli -D 

npm install babel-preset-es2015 -D

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

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

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

• build-t ：單獨編譯某個文件

• build-d：把一個文件夾內的所有文件統一編譯到另一個文件夾里（文件夾自動生成，不需要自己創建）

• build-o：把一個文件夾內的指定文件編譯到另外的文件夾里（文件夾需要自己創建，可以指定文件名）

{   "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"   } }

啟動編譯

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

下面是編譯后的es5文件。

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

ES6轉ES5（第二種）
其實跟第一種差不多。

初始化項目

npm init --y

安裝依賴

npm install babel-cli -D 

npm install babel-preset-es2015 -D

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

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

編輯package.json
我們需要自己在scripts字段里添加命令，命令內容與第一種方法的一樣，這里只不過省了--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"   } }

啟動編譯

npm run build

下面是編譯后的es5文件。

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

ES6+轉ES5
這里 ES6+ 說的是ES6、ES7、ES8等。

初始化項目

npm init --y

安裝依賴

npm install babel-cli -D 

npm install babel-preset-env -D

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

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

在項目中創建并編輯.babelrc文件
在根目錄下創建.babelrc文件。

{     "presets": ["env"] }

編輯package.json
命令內容不只是這一個，根據你需求寫，其他命令可以看上面的ES6轉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"   } }

啟動編譯

npm run build

下面是編譯后的es5文件。

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

關于ES6轉ES5的兩種方法以及ES6怎樣轉ES5就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。