1 概述

Babel 相當(dāng)于一個(gè)中介，一邊是用戶(hù)，另一邊是瀏覽器。這幾年，JavaScript 發(fā)生了很大的變化，許多新特性在很多瀏覽器里都不支持。

Babel 的主要作用就是規(guī)避這些問(wèn)題，可以確保 JavaScript 代碼兼容所有的瀏覽器，比如 IE 11。

2 Babel 的工作原理

Babel 使用 AST 把不兼容的代碼編譯成 ES15 版本，因?yàn)榇蠖鄶?shù)瀏覽器都支持這個(gè)版本的 JavaScript 代碼。

2.1 如何設(shè)置？

在控制臺(tái)運(yùn)行如下命令：

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

應(yīng)用程序的根目錄會(huì)默認(rèn)創(chuàng)建一個(gè) babel.config.json 文件。Babel 將遍歷 src 目錄下的所有 JS 文件。

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}`

把 babel.config.json 添加到 package.json 里。

"build": "./node_modules/.bin/babel src --out-dir build"

然后，執(zhí)行如下命令：

npm run build

這時(shí)，在 build 文件夾里就生成了轉(zhuǎn)換代碼。

2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情

• @babel/core：Babel 的所有核心功能都在這里
• @babel/cli：提供了 CLI 工具，使我們能夠運(yùn)行 npm run build
• @babel/preset-env：提供預(yù)置功能

3 插件

Babel 使用插件來(lái)執(zhí)行代碼轉(zhuǎn)換，插件其實(shí)就是用 JavaScript 所寫(xiě)的程序片段。比如@babel/plugin-change-Arrow-function ，它的代碼實(shí)現(xiàn)如下：

// From this
const fn = () => 1;

// Converted to this
var fn = function fn() {
  return 1;
};

上面提到的 @babel/preset-env 本身包含了一組插件，可以處理手動(dòng)設(shè)置插件帶來(lái)的很多問(wèn)題，大多數(shù)情況下能夠智能處理代碼。

Polyfill

Polyfill 是 JavaScript 代碼片段，兼容原本不支持的舊版瀏覽器。Polyfill 模塊包括core-js和一個(gè)自定義的重生器運(yùn)行時(shí)，以模擬完整的ES2015 +環(huán)境。如果要使用 PolyFill 必須運(yùn)行如下命令：

// Install via 
npm install --save @babel/polyfill

// Add via
import "core-js/stable";
import "regenerator-runtime/runtime";

4 Babel 配置文件的優(yōu)先級(jí)

從低到高依次為：

• babel.config.json
• babelrc.json
• @babel/cli

依照優(yōu)先級(jí)，babel.config.json 會(huì)被 . babelrc 覆蓋，依次類(lèi)推。

5 Babel 有哪些值得注意的選項(xiàng)

以下面的配置為例：

{
    "presets":
    [
        [
            "@babel/env",
            {
                "targets":
                {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }

        ]
    ],
}

如果要縮減輸出代碼，需要增加選項(xiàng) "minified": true

如果要忽略某些文件，則添加 ignore: ["file or directory path"]

只編譯特定的文件或文件夾，則添加

// For Files
"only" : ["./src/some_file.js"],
// For Directory
"only" : ["./src"],

總結(jié)

到此這篇關(guān)于Vue中babel.config.js配置的文章就介紹到這了,更多相關(guān)Vue babel.config.js配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論