前端工程化

1.babel

1.1 babel概念

•  爲何要寫這篇文章？
  

         在vue-cli  create-react-app腳手架在前端界大道其行，babel等相關配置愈來愈被弱化。開發者只須要知道npm run dev   npm run build就能夠構建一個完成項目，對於核心知識瞭解甚少。因此，寫下了這篇文章。

•   這篇文章針對什麼讀者？

         如今拋出如下幾個概念：babel  babel-cli babel-core babel-load babel-polyfill babel-plugin-transfrom-runtime 

         若是您對上面概念很是瞭解，您可能不須要往下讀了。若是您對上面概念還存有疑惑，那便慢慢讀下去。

•   babel是幹什麼的？

          通俗講：babel將ES6及其以上代碼轉化爲ES5代碼，讓瀏覽器或者node認識並執行。這篇文章主要以babel6講述，babel7後面會稍稍提到。

•   npm install babel 會發生什麼？
  

          當第一次聽到babel這個概念時，我覺得babel 和webpack等同樣，可直接安裝，即

npm install babel --save-dev,通過漫長的安裝，安裝成功，在node_modules下查看babel包，查看內部代碼，核心代碼都被移除，只有console.warn警告，大概意思說"您安裝了錯誤了babel包，請您卸載並安裝babel-cli"。

           查閱資料發現，單獨的babel包是在babel5時代的，官方也早已廢棄這個包。如今提倡用babel-cli。

            那麼 babel-cli又是什麼？請看下面。

1.2 babel核心

• babel-cli

       babel-cli是個命令行工具，能夠經過命令行對代碼就行轉化，好比:

// 將當前文件夾下的a.js轉成es5並寫入到b.js文件中
babel a.js --out-file b.js
// 將src目錄下的文件遍歷轉碼，寫入到lib文件下。
babel src --out-dir lib
複製代碼

       這種方式使用較少，僅僅在項目很是小的狀況下才會用到。並且，還有個問題:

       babel在轉import關鍵字時，會轉成common.js標準下的require，在咱們瀏覽器中仍是沒法直接使用。

1.3 babel插件系統

2.gulp

3.webpack