webpack中babel的使用（學習篇10）

babel的作用主要是：把ES6代碼轉換爲當前和舊版瀏覽器或環境中可以識別的js語法。下邊說說babel在webpack中的用法。
安裝：

npm install --save-dev babel-loader @babel/core

• babel-loader爲webpack做打包用的一個輔助工具
• @babel-core爲babel的一個核心庫，主要作用是轉譯語法

配置規則：

module: {
    rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/,
      loader: "babel-loader"
    }
}

配置項的作用：

• test: /.js$/ ⇒ 指編譯js文件
• loader: “babel-loader” ⇒ 使用babel-loader工具進行轉譯
• exclude: /node_modules/ ⇒ 指的是如果你的js文件在node_modules裏邊，就不使用babel-loader了，因爲它裏邊的代碼都是些第三方代碼，已經做好了轉譯的工作。

接下來還需安裝：@babel-preset-env

npm install @babel/preset-env --save-dev

安裝@babel-preset-env的原因是：上邊安裝的babel-loader只是webpack和babel通訊的一個橋樑，但babel-loader並不能把JS裏的ES6語法翻譯爲ES5語法。所以，還需要藉助@babel-preset-env這個工具來做語法上的翻譯。這個工具中包含了所有ES6翻譯爲ES5的規則。

@babel-preset-env配置：

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 給loader一個options配置參數
       presets: ["@babel/preset-env"]
     }
   }
}

index.js（ES6代碼）

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];
arr.map(item => {
  console.log(item);
})

此時進行打包：

npx  webpack

注意：現在打包生成的dist.js文件只有29kb
在打包生成的dist.js文件裏，我們看到已經完成了ES6語法到ES5語法上的翻譯，但是還是會存在一些對象和方法，在低版本中是不兼容的。所以我們不僅要使用@babel/preset-env做語法上的轉換，還要把低版本瀏覽器中缺失的一些變量、對象以及函數，補充到低版本的瀏覽器裏。接下來，我們又需要藉助@babel/polyfill工具來做低版本中特性的補充。具體安裝配置看下方。

安裝：

npm  install  --save  @babel-polyfill

引入：

// 在js入口文件中，所有代碼運行之前引入
import  "@babel-polyfill";
const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];
arr.map(item => {
  console.log(item);
})

執行打包：

npx  webpack

注意：在引入@babel/polyfill之後打包生成的dist.js文件一下子增加到983kb

原因是：@babel/polyfill幫我們把所有低版本瀏覽器不兼容的一些變量、對象、方法等，全部處理並放到了dist.js文件裏。但在實際應用中，我們只需要把用到的對象和方法，藉助工具處理低版本的兼容問題，沒有用到的特性，沒有必要一併處理。從而提升打包效率，並減小項目的體積。
解決辦法：我們可以通過一些配置項，實現按需處理低版本兼容問題，配置如下

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 給loader一個options配置參數
       presets: [["@babel/preset-env", {
			useBuiltIns: "usage"
		}]]
     }
   }
}

• useBuiltIns: “usage” ⇒ 指的是當babel/polyfill去填充低版本瀏覽器不兼容的方法和變量的時候，不是把所有的不兼容特性都加進去，而是用到了哪些，就填充哪些。（如上文中的map/promise等）

再次打包：

npx  webpack

注意：使用@babel/polyfill按需處理兼容的配置時，打包後的dist.js文件只有173kb, 所以推薦這種用法
?通過以上配置，此時，我們的代碼就同樣可以在低版本的瀏覽器中運行了。

接下來再來看一個優化配置：
由於我們的瀏覽器版本更新迭代非常快，所以，對於新版本（67以上）的chrome瀏覽器已經完全適配了ES6的語法，所以我們可以讓67版本以上的chrome, 不必再做ES6向ES5的語法翻譯，不必再填充兼容特性。
配置如下：

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 給loader一個options配置參數
       presets: [["@babel/preset-env", {
       		targets: {
               chrome: "67" // 對於大於67版本的瀏覽器，不填充兼容特性，不再做ES6向ES5的轉換，默認支持
            },
			useBuiltIns: "usage"
		}]]
     }
   }
}

再次執行打包：

npx  webpack

注意：現在打包後的dist.js文件又回到了最初的大小，爲29.4kb, 因爲我用的是chrome 76版本

另： babel的配置有很多很多，更多信息請查看官方文檔，不過目前的配置已經完全支持所有的ES6語法的轉換了。