前端工程化

Tra發表於2019-02-14
前端

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




相關文章