如何將ES6轉換成ES5？

一、 介紹

ECMAScript 6(ES6)的發展速度非常之快，但現代瀏覽器對ES6新特性支持度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。

Babel是一個廣泛使用的轉碼器，babel可以將ES6代碼完美地轉換為ES5代碼，所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。

 

二、使用

1、新建工程文件夾這里起名叫做es6,然后在里面創建兩個文件夾分別為src 、js如下圖：(src為待轉換es6 js存放目錄，js為編譯完成后的es5 js存放目錄)

2、在src目錄下新建一個js文件（這里起名叫做index.js），里面輸入es6的代碼：

let b = 1; console.log(b); const name = '張三'; console.log(name); let c = '成功了么'; setTimeout(() => { console.log(c) }, 200)

3、 初始化項目

1）打開終端命令提示符 進入工程目錄（這里也就是es6文件夾）輸入如下命令初始化項目：（這里用的npm,國內用戶建議用cnpm不懂得可以移步至淘寶鏡像使用）命令執行完成后會在根目錄生成package.json文件。

npm init -y //-y是指表示全部默認，不需要一個一個敲回車

2）打開我們可以看到里面的內容（可以根據自己的需要進行修改，比如我們修改name的值。）

{
  "name": "es6",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC" }

 

三、全局安裝babel工具

1）在終端中輸入以下命令,

npm install -g babel-cli

2）雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，我們還需要安裝轉換包才能成功轉換。

npm install --save-dev babel-preset-es2015 babel-cli

3）安裝完成后，我們可以看一下我們的package.json文件，已經多了devDependencies選項。

{
  "name": "es6",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1",     "dev":"babel src --out-dir js"   },   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.26.0",     "babel-preset-es2015": "^6.24.1"   } } 

 

四、新建.babelrc

在項目根目錄新建(.babelrc)文件輸入如圖所示代碼：

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

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

五、現在你可以盡情轉換了

終端輸入如下命令：（babel 待轉換路徑/ --out-dir 轉換后路徑/）
我們這里是從src轉換到js目錄下

babel src --out-dir js

現在我們js目錄下面就生成了編譯后的js我們打開看一下(大功告成)
是不是每次這樣輸入一大串命令感覺很麻煩？
通過修改package.json里面的別名來實現編譯 修改（“dev”:“babel src --out-dir js”）

{
  "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"babel src --out-dir js" }, "author": "", "license": "ISC" }

以后你只需要如下命令就可以編譯了（是不是感覺很簡單呢）

 

npm run dev