在 webpack 中編寫 JavaScript 代碼，可以使用最新的 ES 語法，而最終打包的時候，webpack 會借助 Babel 將 ES6+語法轉(zhuǎn)換成在目標(biāo)瀏覽器可執(zhí)行 ES5 語法。所以 Babel 是一個重要的知識點(diǎn)需要掌握。

什么是 Babel

Babel 是 JavaScript 的編譯器，通過 Babel 可以將我們寫的最新 ES 語法的代碼輕松轉(zhuǎn)換成任意版本的 JavaScript 語法。隨著瀏覽器逐步支持 ES 標(biāo)準(zhǔn)，我們不需要改變代碼，只需要修改 Babel 配置即可以適配新的瀏覽器。
舉例說明，下面是 ES6 箭頭函數(shù)語法的代碼：

[1,2,3].map(n => n**2);

經(jīng)過 Babel 處理后，可以轉(zhuǎn)換為普通的 ES5 語法：

[1,2,3].map(function(n) {
 return Math.pow(n, 2);
});

Babel 初體驗(yàn)

下面來介紹下 Babel 的安裝和功能及其配置文件。

1. 使用 babel-cli 命令行工具

Babel 本身自己帶有 CLI（Command-Line Interface，命令行界面）工具，可以單獨(dú)安裝使用。下面我們在項(xiàng)目中安裝 @babel/cli 和 @babel/core。

npm i -D @babel/core @babel/cli

然后創(chuàng)建一個 babel.js 文件：

// babel.js
[1,2,3].map(n => n**2);

然后執(zhí)行npx babel babel.js，則會看到輸出的內(nèi)容，此時可能會看到輸出的內(nèi)容跟源文件內(nèi)容沒有區(qū)別，這是因?yàn)闆]有加轉(zhuǎn)換規(guī)則，下面安裝@babel/preset-env。然后執(zhí)行 CLI 的時候添加 --presets flag：

// 安裝 preset-env
npm i -D @babel/preset-env
// 執(zhí)行 CLI 添加 --presets
npx babel babel.js --presets=@babel/preset-env

最終輸出的代碼就是轉(zhuǎn)換為 ES5 的代碼了：

‘use strict'
[1,2,3].map(function(n) {
 return Math.pow(n, 2);
});

如果要輸出結(jié)果到固定文件，可以使用 --out-file 或 -o 參數(shù)：

npx babel babel.js -o output.js。

Tips: Babel 7 使用了 @babel 命名空間來區(qū)分官方包，因此以前的官方包 babel-xxx 改成了 @babel/xxx。

2.配置文件

除了使用命令行配置 flag 之外，Babel 還支持配置文件，配置文件支持兩種：

使用 package.json 的 babel 屬性；

在項(xiàng)目根目錄單獨(dú)創(chuàng)建 .babelrc或者 .babelrc.js文件。

示例如下：

// package.json
{
 ‘name': ‘my-package',
 ‘version': ‘1.0.0',
 ‘babel': {
 ‘presets': [‘@babel/preset-env']
 }
}
 
// .babelrc
{
 ‘presets': [‘@babel/preset-env']
}

Babel會在正在被轉(zhuǎn)義的文件當(dāng)前目錄中查找一個 .babelrc 文件。 如果不存在，它會向外層目錄遍歷目錄樹，直到找到一個 .babelrc 文件，或一個 package.json 文件中有 "babel": {}。

3.env 選項(xiàng)

如果我們希望在不同的環(huán)境中使用不同的 Babel 配置，那么可以在配置文件中添加 env 選項(xiàng)：

{
 ‘env': {
 ‘production': {
  ‘presets': [‘@babel/preset-env']
 }
 }
}

env 選項(xiàng)的值將從 process.env.BABEL_ENV 獲取，如果沒有的話，則獲取 process.env.NODE_ENV 的值，它也無法獲取時會設(shè)置為 "development"。

Babel 的插件和 Preset

Babel 的語法轉(zhuǎn)換是通過強(qiáng)大的插件系統(tǒng)來支持的。Babel 的插件分為兩類：轉(zhuǎn)換插件和語法解析插件。

不同的語法對應(yīng)著不同的轉(zhuǎn)換插件，比如我們要將箭頭函數(shù)轉(zhuǎn)換為 ES5 函數(shù)寫法，那么可以單獨(dú)安裝 @babel/plugin-transform-arrow-functions 插件，轉(zhuǎn)換插件主要職責(zé)是進(jìn)行語法轉(zhuǎn)換的，而解析插件則是擴(kuò)展語法的，比如我們要解析 jsx 這類 React 設(shè)計(jì)的特殊語法，則需要對應(yīng)的 jsx 插件。

如果不想一個個的添加插件，那么可以使用插件組合 preset（插件預(yù)設(shè)，插件組合更加好理解一些），最常見的 preset 是 @babel/preset-env。之前的 preset 是按照 TC39 提案階段來分的，比如看到 babel-preset-stage-1 代表，這個插件組合里面是支持 TC39< Stage-1 階段的轉(zhuǎn)換插件集合。

@babel/preset-env 是 Babel 官方推出的插件預(yù)設(shè)，它可以根據(jù)開發(fā)者的配置按需加載對應(yīng)的插件，通過 @babel/preset-env 我們可以根據(jù)代碼執(zhí)行平臺環(huán)境和具體瀏覽器的版本來產(chǎn)出對應(yīng)的 JavaScript 代碼，例如可以設(shè)置代碼執(zhí)行在 Node.js 8.9 或者 iOS 12 版本。

Babel polyfill

Babel 只負(fù)責(zé)進(jìn)行語法轉(zhuǎn)換，即將 ES6 語法轉(zhuǎn)換成 ES5 語法，但是如果在 ES5 中，有些對象、方法實(shí)際在瀏覽器中可能是不支持的，例如：Promise、 Array.prototype.includes，這時候就需要用 @babel/polyfill 來做模擬處理。@babel/polyfill 使用方法是先安裝依賴，然后在對應(yīng)的文件內(nèi)顯性的引入：

// 安裝，注意因?yàn)槲覀兇a中引入了 polyfill，所以不再是開發(fā)依賴（--save-dev，-D）
npm i @babel/polyfill

在文件內(nèi)直接 import 或者 require 進(jìn)來：

// polyfill
import ‘@babel/polyfill'
console.log([1,2,3].includes(1));

Bable runtime

@babel/polyfill 雖然可以解決模擬瀏覽器不存在對象方法的事情，但是有以下兩個問題：

直接修改內(nèi)置的原型，造成全局污染；

無法按需引入，Webpack 打包時，會把所有的 Polyfill 都加載進(jìn)來，導(dǎo)致產(chǎn)出文件過大。

為了解決這個問題，Babel 社區(qū)又提出了 @babel/runtime 的方案，@babel/runtime 不再修改原型，而是采用替換的方式，比如我們用 Promise，使用 @babel/polyfill 會產(chǎn)生一個 window.Promise 對象，而 @babel/runtime 則會生成一個 _Promise （示例而已）來替換掉我們代碼中用到的 Promise。另外 @babel/runtime 還支持按需引入。下面以轉(zhuǎn)換 Object.assign 為例，來看下 @babel/runtime 怎么使用。

• 安裝依賴 @babel/runtime：npm i @babel/runtime；
• 安裝 npm i -D @babel/plugin-transform-runtime 作為 Babel 插件；
• 安裝需要轉(zhuǎn)換 Object.assign 的插件：

npm i -D @babel/plugin-transform-object-assign

編寫一個 runtime.js 文件，內(nèi)容如下：

Object.assign({}, {a:1});

執(zhí)行 npx babel runtime.js --plugins @babel/plugin-transform-runtime,@babel/plugin-transform-object-assign，最終的輸出結(jié)果是：

import _extends from ‘@babel/runtime/helpers/extends';
_extends(
 {},
 {
  a:1
 }
);

代碼中自動引入了 @babel/runtime/helpers/extends 這個模塊（所以要添加 @babel/runtime 依賴?。?br /> @babel/runtime也不是完美的解決方案，由于 @babel/runtime 不修改原型，所以類似[].includes() 這類使用直接使用原型方法的語法是不能被轉(zhuǎn)換的。

Tips：'@babel/polyfill'實(shí)際是 core-js和
regenerator-runtime的合集，所以如果要按需引入'@babel/polyfill'的某個模塊，可以直接引入對應(yīng)的
core-js 模塊，但是手動引入的方式還是太費(fèi)勁。

@babel/preset-env

鋪墊了這么多，我們繼續(xù)來講 @babel/preset-env，前面介紹了@babel/preset-env 可以零配置的轉(zhuǎn)化 ES6 代碼，我們?nèi)绻?xì)化的使用 @babel/preset-env ，就需要配置對應(yīng)的選項(xiàng)了，在 @babel/preset-env 的選項(xiàng)中，useBuiltIns 和 target 是最重要的兩個， useBuiltIns 用來設(shè)置瀏覽器 polyfill，target 是為了目標(biāo)瀏覽器或者對應(yīng)的環(huán)境（browser/node）。

preset-env 的 useBuiltIns

前面介紹了 @babel/polyfill 和 @babel/runtime 兩種方式來實(shí)現(xiàn)瀏覽器 polyfill，兩種方式都比較繁瑣，而且不夠智能，我們可以使用 @babel/preset-env 的 useBuildIn 選項(xiàng)做 polyfill，這種方式簡單而且智能。
useBuiltIns 默認(rèn)為 false，可以使用的值有 usage 和 entry：

{
 ‘presets': [
 ‘@babel/preset-env', {
  ‘useBuiltnls': ‘usage|entry|false'
 }
 ]
}

usage 表示明確使用到的 Polyfill 引用。在一些 ES2015+ 語法不支持的環(huán)境下，每個需要用到 Polyfill 的引用時，會自動加上，例如：

const p = new Promise();
[1,2].includes(1);
‘foobar'.includes(‘foo');

使用 useBuiltIns='usage' 編譯之后，上面代碼變成，真正的做到了按需加載，而且類似 [].includes() 這類直接使用原型方法的語法是能被轉(zhuǎn)換的：

‘use strict'
require(‘core-js/modules/es.array.includes');
require(‘core-js/modules/es.object.to-string');
require(‘core-js/modules/es.promise');
require(‘core-js/modules/es.string.includes');
var p = new Promise();
[1,2].includes(1);
‘foobar'.includes(‘foo');

entry 表示替換 import "@babel/polyfill";（新版本的 Babel，會提示直接引入 core-js或者regenerator-runtime/runtime來代替 @babel/polyfill）的全局聲明，然后根據(jù) targets 中瀏覽器版本的支持，將 polyfill 拆分引入，僅引入有瀏覽器不支持的 polyfill，所以 entry 相對 usage 使用起來相對麻煩一些，首先需要手動顯性的引入 @babel/polyfill ，而且根據(jù)配置 targets 來確定輸出，這樣會導(dǎo)致代碼實(shí)際用不到的 polyfill 也會被打包到輸出文件，導(dǎo)致文件比較大。

一般情況下，個人建議直接使用 usage 就滿足日常開發(fā)了。

需要提一下的是，polyfill 用到的 core-js 是可以指定版本的，比如使用 core-js@3，則首先安裝依賴 npm i -S core-js@3，然后在 Babel 配置文件 .babelrc 中寫上版本。

// .babelrc
{
 ‘presets': [
 [
  ‘@babel/preset-env',
  {
   ‘useBuiltlns': ‘useage',
   ‘corejs': 3
  }
 ]
 ]
}

preset-env 的 target

假設(shè)希望代碼中使用 ES6 的模板字面量`語法，但是實(shí)際執(zhí)行代碼的宿主瀏覽器是 IE 10 卻不支持，那么我們可以使用</code>target指定目標(biāo)瀏覽器了。

{
 ‘presets': [
  [
  ‘@babel/preset-env',
  {
   ‘targets': {
    ‘browsers': ‘IE 10'
   }
  }
  ]
 ]
}

如果我們代碼是在 Node.js 環(huán)境執(zhí)行的，則可以指定 Node.js 的版本號：

{
 ‘presets': [
 [
  ‘env',
  {
  ‘@babel/preset-env': {
   ‘node: ‘8.9.3'
  }
  }
 ]
 ] 
}

targets.browsers 需要使用 browserslist 的配置方法，但是其設(shè)置會被 targets.[chrome, opera, edge, firefox, safari, ie, ios, android, node, electron] 覆蓋；
targets.node 設(shè)置為 true 或 "current" 可以根據(jù)當(dāng)前 Node.js 版本進(jìn)行動態(tài)轉(zhuǎn)換。也可以設(shè)置為具體的數(shù)字表示需要支持的最低 Node.js 版本；
targets.esmodules 設(shè)置使用 ES Modules 語法，最新瀏覽器支持，這個在后面 Webpack 插件章節(jié)會詳細(xì)介紹如何實(shí)現(xiàn) Modern Mode。

在 Webpack 中使用 Babel

通過上面的內(nèi)容，我們已經(jīng)掌握了 Babel 的基本用法，下面在 webpack 中使用 Babel 就變得很簡單了，首先安裝 npm 依賴，然后修改 webpack.config.js。

安裝依賴包：

// 安裝開發(fā)依賴
npm i webpack babel-loader webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

// 將 runtime 作為依賴
npm i @babel/runtime -S

第二步創(chuàng)建 webpack.config.js 文件，內(nèi)容如下：

// webpack.config.js
module.exports = {
 entry: ‘./babel.js',
 mode: ‘development',
 devtool: false,
 module: {
 rules: [
  {
  test: /\.js$/,
  use: [
   {
   loader: ‘babel-loader',
   options: {
    presets: [
     [
     ‘@babel/preset-env',
     {
      useBuiltlns: ‘usage'
     }
     ]
    ]
   }
   }
  ]
  }
 ]
 }
}

上面的 webpack.config.js 文件直接將 Babel 的配置寫到了 options 中，還可以在項(xiàng)目根目錄下創(chuàng)建 .babelrc 或者使用 package.json 的 babel 字段。

小結(jié)

在本篇中，我們學(xué)習(xí)了 Webpack 怎么配置 Babel，希望對大家有所幫助，如果喜歡蘿卜的文章，請大家持續(xù)關(guān)注，下一篇我將給大家介紹 webpack-dev-server 這個超好用的工具。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論