Babeljs-babel-polyfill

提供：Dev Guides
移動先:案内、検索

BabelJS-バベルポリフィル

Babel Polyfillは、利用できない機能のWebブラウザーへのサポートを追加します。 Babelは、最新のecmaバージョンから必要なバージョンにコードをコンパイルします。 プリセットに従って構文を変更しますが、使用するオブジェクトまたはメソッドに対しては何もできません。 これらの機能には、下位互換性のためにポリフィルを使用する必要があります。

ポリフィルできる機能

以下は、古いブラウザで使用するときにポリフィルのサポートが必要な機能のリストです-

  • 約束
  • Map
  • Set
  • シンボル
  • 弱マップ
  • 弱点
  • Array.from、Array.includes、Array.of、Array＃find、Array.buffer、Array＃findIndex
  • Object.assign、Object.entries、Object.values

プロジェクトのセットアップを作成し、バベルポリフィルの動作も確認します。

コマンド

npm init

babelに必要なパッケージをインストールします。

babel 6のパッケージ

npm install babel-cli babel-core babel-preset-es2015 --save-dev

babel 7のパッケージ

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

これが最終的なpackage.jsonです-

最終パッケージJson

コードをes5にコンパイルするため、es2015をプリセットに追加します。 

*.babelrc for babel 6*

Babelrc 

*babel 7の.babelrc*
{
   "presets":["@babel/env"]
}

ブラウザでコードをテストできるように、ライトサーブをインストールします- 

npm install --save-dev lite-server

package.jsonでコードをコンパイルするためにbabelコマンドを追加しましょう-

Babel Command

lite-serverを呼び出すbuildコマンドも追加しました。

Babel-polyfillはbabel-coreパッケージとともにインストールされます。 babel-polyfillは、以下に示すようにノードモジュールで利用可能になります-

ノードモジュール

約束にさらに取り組み、それとともにbabel-polyfillを使用します。

ES6-約束

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

コマンド

npx babel promise.js --out-file promise_es5.js

BabelJS-ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

コンパイルで何も変更する必要はありません。 promiseのコードはそのまま転載されています。 ただし、promiseをサポートしていないブラウザーは、コードをes5にコンパイルしていてもエラーをスローします。

この問題を解決するには、コンパイルされた最終的なes5コードとともにポリフィルを追加する必要があります。 ブラウザーでコードを実行するには、ノードモジュールからbabel-polyfillファイルを取得し、次のようにpromiseを使用するlファイルに追加します-

インデックス

<html>
   <head>
   </head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="promise_es5.js"></script>
   </body>
</html>

出力

Babel Polyfill Testing

indexlファイルでは、 node_modules のpolyfill.min.jsファイルに続けてpromise_es5.jsを使用しました- 

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

<script type="text/javascript" src="promise_es5.js"></script>

注-ポリフィルファイルは、メインのjavascript呼び出しの前の開始時に使用する必要があります。

文字列のパディング

文字列パディングは、指定された長さに従って、左側から別の文字列を追加します。 文字列パディングの構文は次のとおりです-

構文

str.padStart(length, string);
str.padEnd(length, string);

例

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

出力

_____abc
abc_____

バベル-ES5

npx babel strpad.js --out-file strpad_es5.js

コマンド

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

以下に示すように、jsはbabel-polyfillとともに使用する必要があります-

testl

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing </title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

文字列パディング出力

Map、Set、WeakSet、WeakMap

このセクションでは、Map、Set、WeakSet、WeakMapについて学習します。

  • Map は、キーと値のペアを持つオブジェクトです。
  • Set もオブジェクトですが、一意の値を持ちます。
  • WeakMapおよびWeakSet は、キーと値のペアを持つオブジェクトでもあります。

Map、Set、WeakMap、およびWeakSetは、ES6に追加された新機能です。 古いブラウザで使用されるようにトランスパイルするには、ポリフィルを使用する必要があります。 例に取り組み、ポリフィルを使用してコードをコンパイルします。

例

let m = new Map();//map example
m.set("0","A");
m.set("1","B");
console.log(m);

let set = new Set();//set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

let ws = new WeakSet();//weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

let wm = new WeakMap();//weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));

出力

Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello

コマンド

npx babel set.js --out-file set_es5.js

バベル-ES5

"use strict";

var m = new Map();//map example
m.set("0", "A");
m.set("1", "B");
console.log(m);

var set = new Set();//set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

var ws = new WeakSet();//weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

var wm = new WeakMap();//weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));

以下に示すように、jsはbabel-polyfillとともに使用する必要があります-

testl

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="set_es5.js"></script>
   </body>
</html>

出力

WeakMap出力

配列メソッド

配列では多くのプロパティとメソッドを使用できます。たとえば、array.from、array.includesなど。

これをよりよく理解するために、次の例での作業を検討してみましょう。

例

*arraymethods.js*
var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));

出力 

true
[6, 8, 10]

コマンド

npx babel arraymethods.js --out-file arraymethods_es5.js

Babel-es5

"use strict";

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));

配列で使用されるメソッドはそのまま印刷されます。 それらを古いブラウザで動作させるには、以下に示すように、開始時にポリフィルファイルを追加する必要があります-

インデックス

<html>
   <head></head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="arraymethods_es5.js"></script>
   </body>
</html>

出力

配列メソッドJs

「https://www.finddevguides.com/index.php?title=Babeljs-babel-polyfill&oldid=21940」から取得
Powered by MediaWiki