這篇文章主要介紹了webpack6中Babel怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供敘州企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為敘州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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

什么是 Babel

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

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

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

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

Babel 初體驗(yàn)

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

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

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

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

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

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

然后執(zhí)行npx babel babel.js，則會(huì)看到輸出的內(nèi)容，此時(shí)可能會(huì)看到輸出的內(nèi)容跟源文件內(nèi)容沒有區(qū)別，這是因?yàn)闆]有加轉(zhuǎn)換規(guī)則，下面安裝@babel/preset-env。然后執(zhí)行 CLI 的時(shí)候添加 --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會(huì)在正在被轉(zhuǎn)義的文件當(dāng)前目錄中查找一個(gè) .babelrc 文件。 如果不存在，它會(huì)向外層目錄遍歷目錄樹，直到找到一個(gè) .babelrc 文件，或一個(gè) 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í)會(huì)設(shè)置為 "development"。

Babel 的插件和 Preset

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

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

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

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

Babel polyfill

Babel 只負(fù)責(zé)進(jìn)行語(yǔ)法轉(zhuǎn)換，即將 ES6 語(yǔ)法轉(zhuǎn)換成 ES5 語(yǔ)法，但是如果在 ES5 中，有些對(duì)象、方法實(shí)際在瀏覽器中可能是不支持的，例如：Promise、 Array.prototype.includes，這時(shí)候就需要用 @babel/polyfill 來做模擬處理。@babel/polyfill 使用方法是先安裝依賴，然后在對(duì)應(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 雖然可以解決模擬瀏覽器不存在對(duì)象方法的事情，但是有以下兩個(gè)問題：

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

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

為了解決這個(gè)問題，Babel 社區(qū)又提出了 @babel/runtime 的方案，@babel/runtime 不再修改原型，而是采用替換的方式，比如我們用 Promise，使用 @babel/polyfill 會(huì)產(chǎn)生一個(gè) window.Promise 對(duì)象，而 @babel/runtime 則會(huì)生成一個(gè) _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

編寫一個(gè) 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
 }
);

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

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

@babel/preset-env

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

preset-env 的 useBuiltIns

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

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

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

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

使用 useBuiltIns='usage' 編譯之后，上面代碼變成，真正的做到了按需加載，而且類似 [].includes() 這類直接使用原型方法的語(yǔ)法是能被轉(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，會(huì)提示直接引入 core-js或者regenerator-runtime/runtime來代替 @babel/polyfill）的全局聲明，然后根據(jù) targets 中瀏覽器版本的支持，將 polyfill 拆分引入，僅引入有瀏覽器不支持的 polyfill，所以 entry 相對(duì) usage 使用起來相對(duì)麻煩一些，首先需要手動(dòng)顯性的引入 @babel/polyfill ，而且根據(jù)配置 targets 來確定輸出，這樣會(huì)導(dǎo)致代碼實(shí)際用不到的 polyfill 也會(huì)被打包到輸出文件，導(dǎo)致文件比較大。

一般情況下，個(gè)人建議直接使用 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 的模板字面量`語(yǔ)法，但是實(shí)際執(zhí)行代碼的宿主瀏覽器是 IE 10 卻不支持，那么我們可以使用</code>target指定目標(biāo)瀏覽器了。

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

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

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

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

在 Webpack 中使用 Babel

通過上面的內(nèi)容，我們已經(jīng)掌握了 Babel 的基本用法，下面在 webpack 中使用 Babel 就變得很簡(jiǎn)單了，首先安裝 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 字段。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“webpack6中Babel怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

本文題目：webpack6中Babel怎么用-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article22/doehcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、服務(wù)器托管、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)