インタビュー中のバベルのテストサイト
Babel関数：新しいJS文法を解析し、ブラウザーで使用できるように下位バージョンの文法に変換します。
1.環境のセットアップと基本構成
yarn init -y
yarn add @babel/cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/polyfill @babel/runtime
babel構成ファイル.babelrc：
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
]
}
基本的な使用法：
src / index.js
const sum = (a, b) => a + b
注文の実行：
yarn babel src/index.js
コマンドライン出力：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
babelそれ自体は空のシェルであり、単なる処理ツールです。文法にES6変換できる理由ES5はplugin、それぞれの機能であり、必要なplugin単語が多すぎて覚えにくいため、presetデフォルトの計画presetはplugin再構築の多くのような、パッケージ名をメイクしpreset-env、preset-flow、preset-react、preset-typescript、preset-envそれは変換がたくさん含まれているES6構文をplugin、あなたが設定するには、個々こともでき、十分でない場合は、plugin
二、バベル-ポリフィル
babel-polyfillつまりcore-js、regeneratorコレクション
1.PolyfillですJSプログラムにパッチを当てる文法。
いくつかの低レベルのIEブラウザはサポートしていない場合たとえば、Array.indexOfあなたは、インターネット上のものを見つけることができますArray.indexOfし、Polyfillブラウザの互換性の問題に対処するためのプロジェクトでそれを置きます
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
// ......
}
}
2.core-js公式提供ES6、ES7およびその他の新しい文法Polyfillコレクション
3.regeneratorあるgenerator文法Polyfill
Babel 7.4後で推奨されていませんbabel-polyfill、それは使用することをお勧めしますcore-jsと、regenerator
babelpreset-env彼らはすでに、構文に準拠しているため、新しいAPIを変換しないことがありES5、たとえば、構文仕様：
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
バベルで処理した後：
"use strict";
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
だからあなたは紹介する必要がありますbabel-polyfill
import '@babel/polyfill'
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
バベル変換後：
"use strict";
require("@babel/polyfill");
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
あることが分かるbabelだけで文法を解析し、モジュール性があり、モジュール化を扱っていないWebpack仕事
4.babel-ployfillはオンデマンドで導入されます
- ファイルサイズ
- 関数の一部のみを使用し、すべてを導入する必要はありません
- オンデマンド導入を構成する
.babelrcファイル内のpresetアレイに構成を追加しますcore-js。
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
]
}
次に、次index.jsの場所でpolyfill手動インポートを削除します。
import '@babel/polyfill'
const sum = (a, b) => a + b
// 新的API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)
再利用babel処理、実現されたオンデマンド導入：
"use strict";
require("core-js/modules/es.array.includes");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var sum = function sum(a, b) {
return a + b;
}; // 新的API
Promise.resolve(100).then(function (data) {
return data;
});
[10, 20, 30].includes(20);
5.バベルポリフィルの問題
- 地球環境を汚染する
// babel-polyfill的实现原理 window.Promise = function() { } Array.prototype.includes = function() { } // 使用方 window.Promise = 'abc' - あなたが独立したウェブシステムを作るならば、それは傷つけません
- サードパーティのライブラリを作成すると、問題が発生します
したがってbabel-runtime、babel-polyfillグローバル変数の汚染の問題を解決するために使用できます
三、バベル-ランタイム
.babelrc設定babel-runtime
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
babel処理に使用した後の結果は次のとおりです。
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
require("@babel/polyfill");
var _context;
var sum = function sum(a, b) {
return a + b;
}; // 新的API
_promise["default"].resolve(100).then(function (data) {
return data;
});
(0, _includes["default"])(_context = [10, 20, 30]).call(_context, 20);
処理された結果のメソッド名の前にアンダースコアが付いていることがわかります。アンダースコアはグローバル変数を汚染しなくなります。