ES6的開發環境搭建

ES6的開發環境搭建

概念

在搭建es6開發環境以前，先簡單介紹一下es6。

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

咱們爲何要使用es6？es6有什麼優勢？......，我會在後面寫一個es6專題系列，來介紹es6的使用。本次分享的內容是 es6的開發環境搭建。

那麼，你確定又要問，問什麼要搭建es的開發環境，上面不都說 es6是JavaScript 語言的下一代標準了嘛，咱們平時寫的js都不須要搭建環境，直接在瀏覽器裏就能運行。

由於至今各大瀏覽器廠商所開發的 JavaScript 引擎都尚未完成對 ES2016 中全部特性的完美支持，若是直接使用的話，會報錯的。

因此咱們既想使用es6帶來的新語法、新特性，又想讓如今的瀏覽器支持es6語法，因而乎像babel 、 Traceur等編譯器便出現了。它們能將還沒有獲得支持的 ES2016 特性轉換爲 ES5 標準的代碼，使其獲得瀏覽器的支持。

這裏咱們就使用Babel把ES6編譯成ES5。

創建工程目錄

先創建一個項目的工程目錄，並在目錄下邊創建兩個文件夾：src和dist

個人項目工程目錄

)

src：書寫ES6代碼的文件夾，寫的js程序都放在這裏。

dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面須要引入的時這裏的js文件。

編寫index.html

文件夾創建好後，咱們新建一個index.html文件。

index.html

須要注意的是在引入js文件時，引入的是dist目錄下的文件。

<script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
複製代碼

編寫index.js

在src目錄下，新建index.js文件。這個文件很簡單，咱們只做一個a變量和箭頭函數的聲明，並用console.log()打印出來。

咱們用了let聲明，這裏let是ES6的一種聲明方式，接下來咱們須要把這個ES6的語法文件自動編程成ES5的語法文件。

初始化項目

在安裝Babel以前，須要用npm init先初始化咱們的項目。打開終端或者經過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：

npm init -yes
複製代碼

-y表明所有默認贊成，就不用一次次按回車了。命令執行完成後，會在項目根目錄下生產package.json文件。

{
  "name": "frame.mx.vue",
  "version": "1.0.0",
  "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",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0"
  },
  "dependencies": {},
  "description": ""
}

複製代碼

能夠根據本身的須要進行修改，好比咱們修改author的值。

全局安裝Babel-cli

在終端中輸入如下命令,若是你安裝很慢的話，可使用淘寶鏡像的cnpm來進行安裝。安裝cnpm的方法，你們本身百度吧。

cnpm install -g babel-cli
複製代碼

雖然已經安裝了babel-cli，只是這樣還不能成功進行轉換，若是你不相信能夠輸入下邊的命令試一下。

babel src/index.js -o dist/index.js
複製代碼

你會發現，在dist目錄下確實生產了index.js文件，可是文件並無變化，仍是使用了ES6的語法。由於咱們還須要安裝轉換包才能成功轉換，繼續往下看吧。

本地安裝babel-preset-es2015 和 babel-cli

cnpm install --save-dev babel-preset-es2015 babel-cli
複製代碼

安裝完成後，咱們能夠看一下咱們的package.json文件，已經多了devDependencies選項。

{
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
  }
}
複製代碼

新建.babelrc

在根目錄下新建.babelrc文件(注意，以點開頭的文件是隱藏文件，須要在linux環境經過命令建立)，並打開錄入下面的代碼

{
    "presets":[
        "es2015",		
    ],
    "plugins":[]
}
複製代碼

這個文件咱們創建完成後，如今能夠在終端輸入的轉換命令了，此次ES6成功轉化爲ES5的語法。

babel src/index.js -o dist/index.js
複製代碼

簡化轉化命令

在學習vue 的時候，可使用npm run build 直接利用webpack進行打包，在這裏也但願利用這種方式完成轉換。打開package.json文件，把文件修改爲下面的樣子。

修改好後，之後咱們就可使用 npm run build 來進行轉換了。

這樣，一個簡單的基本的編譯環境就OK了。

如何利用Gulp實時編譯Babel

待續...待續...待續...待續...待續...待續...待續...待續...

至此，ES6的開發環境搭建完畢！