【Web全棧課程三】babel的使用

Node:中間層

1. 開發相對小規模的web後臺，沒法取代java，java高併發的各類特性node沒法替代
2. 工具類的應用 *
   官網：http://nodesjs.org

npm: node package manager ，node的包管理器，安裝node的時候會自動安裝

1. 自動下載、升級
2. 自動下載依賴包

說明：npm原版都很是慢，通常咱們切換爲國內的鏡像，淘寶鏡像：http://npm.taobao.org/
安裝包命令：npm install babel

檢驗是否安裝成功，打開控制檯node -v、npm -v，返回node和npm版本的版本說明安裝成功。

---

babel

歷史背景：es6剛剛出來的時候，各大瀏覽器並不支持es6，所以babel做爲polyfill工具使用
官網：http://babeljs.io
當前定位：做爲一個編譯器，es6->es5

---

建立babel編譯的工程

建立一個空的工程文件夾
一、npm init命令，輸入後，會讓咱們輸入不少項目相關信息，完成後生成會生成一個package.json文件。

http://babeljs.io/docs/setup#... 指導瞭如何安裝使用babel-cli
二、npm install --save-dev babel-cli，運行後工程下會生成node_moduls文件夾，裏面都是工程的依賴包

• --save-dev的簡寫是-D，做用是下載依賴包的同時，將依賴包的配置信息寫入到package.json文件

• 咱們能夠移除node_modules，直接在項目下npm install，就會自動根據package.json文件裏面的配置將須要的依賴包下載下來，對於大型項目依賴包不少的狀況下能起到很好的管理做用。

三、package.json中的scripts配置，咱們啓動一個服務的時候常常須要帶不少參數，每次啓動都敲一次命令很複雜容易錯，所以經過scripts配置執行腳本，經過簡單命令啓動服務。

• 在scripts中配置"build": "babel src -d build"，說明：babel 源文件 -d 目標文件

• 咱們在src下新建1.js測試文件，內容以下

  let a=12;
  let [b,c]=[5,8];
  const show=()=>{
    alert(a+b+c);
  }
  show();

• 執行npm run build，發現build下生成了一個依舊是es6代碼的js文件，babel的引導這裏先讓咱們試錯 = =

四、咱們須要再建立一個.babelrc配置文件

• 執行npm install babel-preset-env --save-dev，安裝babel-preset-env依賴包

• 在工程根目錄建立.babelrc文件，配置babel的編譯選項，提供了presets相似腳手架的功能。env的配置是根據環境自動進行默認預設。

  {
    "presets": ["env"]
  }

• 這個時候再運行npm run build，發現babel將咱們的es6代碼編譯爲了es5代碼，以下：

---

瀏覽器運行結果

咱們新建一個1.html引入src的1.js
1.在高級瀏覽器例如chorme中打開1.html，能夠正常執行

2.在ie7下執行，發現報錯了。將引用換成build下的js文件後的，已經編譯爲es5的js，在ie中成功執行。