es6開發環境搭建，babel 將es6轉化成es5

時間 2019-11-20

標籤 es6 開發環境搭建 babel 轉化 es5 欄目 JavaScript 简体版

原文原文鏈接

工欲善其事，必先利其器。因此咱們第1節就是搭建一個基本的ES6開發環境。如今的Chrome瀏覽器已經支持ES6了，可是有些低版本的瀏覽器仍是不支持ES6的語法，這就須要咱們把ES6的語法自動的轉變成ES5的語法。若是你聽過我Vue課程的話，應該知道Webpack是有自動編譯轉換能力的，除了Webpack自動編譯，咱們還能夠用Babel來完成。這節課咱們就使用Babel把ES6編譯成ES5。html

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

src：書寫ES6代碼的文件夾，寫的js程序都放在這裏。
dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面須要引入的時這裏的js文件。

** 編寫index.html： **webpack

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hello ECMA Script 6
    </body>
</html>

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

<script src="./dist/index.js"></script>

編寫index.jsnpm

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

let a=1;
console.log(a);

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

** 初始化項目 **瀏覽器

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

npm init -y

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

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

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

全局安裝Babel-cli

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

npm install -g babel-cli

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

babel src/index.js -o dist/index.js

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

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

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

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

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

** 新建.babelrc **

在根目錄下新建.babelrc文件，並打開錄入下面的代碼

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

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

babel src/index.js -o dist/index.js

簡化轉化命令：

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

{
  "name": "es6",
  "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.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

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