babel.config.js
1 概述
Babel 相當於一箇中介,一邊是用戶,另一邊是瀏覽器。這幾年,JavaScript 發生了很大的變化,許多新特性在很多瀏覽器裏都不支持。
Babel 的主要作用就是規避這些問題,可以確保 JavaScript 代碼兼容所有的瀏覽器,比如 IE 11。
2 Babel 的工作原理
Babel 使用 AST 把不兼容的代碼編譯成 ES15 版本,因爲大多數瀏覽器都支持這個版本的 JavaScript 代碼。
2.1 如何設置?
在控制檯運行如下命令:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
應用程序的根目錄會默認創建一個 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"
然後,執行如下命令:
npm run build
這時,在 build 文件夾裏就生成了轉換代碼。
2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情
@babel/core:Babel 的所有核心功能都在這裏
@babel/cli:提供了 CLI 工具,使我們能夠運行 npm run build
@babel/preset-env:提供預置功能
3 插件
Babel 使用插件來執行代碼轉換,插件其實就是用 JavaScript 所寫的程序片段。比如@babel/plugin-change-Arrow-function ,它的代碼實現如下:
// From this
const fn = () => 1;
// Converted to this
var fn = function fn() {
return 1;
};
上面提到的 @babel/preset-env 本身包含了一組插件,可以處理手動設置插件帶來的很多問題,大多數情況下能夠智能處理代碼。
Polyfill
Polyfill 是 JavaScript 代碼片段,兼容原本不支持的舊版瀏覽器。Polyfill 模塊包括core-js和一個自定義的重生器運行時,以模擬完整的ES2015 +環境。如果要使用 PolyFill 必須運行如下命令:
// Install via
npm install --save @babel/polyfill
// Add via
import "core-js/stable";
import "regenerator-runtime/runtime";
4 Babel 配置文件的優先級
從低到高依次爲:
babel.config.json
babelrc.json
@babel/cli
依照優先級,babel.config.json 會被 . babelrc 覆蓋,依次類推。
5 Babel 有哪些值得注意的選項
以下面的配置爲例:
{
"presets":
[
[
"@babel/env",
{
"targets":
{
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
}
如果要縮減輸出代碼,需要增加選項 "minified": true
如果要忽略某些文件,則添加 ignore: ["file or directory path"]
只編譯特定的文件或文件夾,則添加
// For Files
"only" : ["./src/some_file.js"],
// For Directory
"only" : ["./src"],
鏈接:https://blog.csdn.net/alexwei2009/article/details/125268933