babel6とbabel7ポリフィルオフとプリセット-envおよびバベル・プラグイン・変換・ランタイム結論

その散乱収穫を記録し、エッセイ。

いくつかの基本的な

1. バベルの役割は、新機能のJSコードは、ほとんどのブラウザで実行できるコードで変換することです。

2. バベルのトランスコーディングが2つの部分に分かれて、一つは変換が新しいAPIで、構文変換です。

3. 変換のためのAPIは非公開APIのような静的メソッド（方法Array.prototype.includes等）及びグローバルオブジェクトObject.assignの一例である一つが二つの部分に分割されます。

4. いかなる状況の下で依存プラグイン、プラグインをトランスコードバベルはちょうどバベルを行いますcode => code。

5. プラグインは特に厄介、1インポート、多くがありますが、私たちが知っているこの時間は、プリセット。

多くのプリセットプラグインのコレクションで、次のように、構成は次のとおりです。

.babelrcファイル

{
  "presets": ["env"]
}

プリセットのenv設定項目がある場合：

{
  "presets": [
    [
      "env",
      {
        // 这里就是配置项
      }
    ]
  ]
}

予め設定された構成は、文字列配列と交換する必要性がある場合、最初の項目が予め設定された名前であり、第2項はopetionsで観察することができます。プリセットでプラグイン。

注：プリセットが実行される右プラグインに左、右から左に実行され、プラグインは、プリセット前に行われます。

babel7へのアップグレードbabel6は、主に使用概要ポリフィルとで異なるbabel6とbabel7の下で、破壊的です。

バベル、ポリフィル

バベル上記の主に2つのことを行う、1は、変革の文法で新しいAPIと互換性があります。

バベル - ポリフィルの役割は、新しいAPIと互換性があります。

babel6

私の知る限りでは、中babel6でポリフィルを使用するための4つの方法があります。

1. 直接の導入（グローバルインパクト、きっぱりと）

   入り口ファイルでimport 'babel-polyfill' / require('babel-polyfill')。そして、あなたは、エントリを追加することができ、WebPACKを使用してくださいentry: ['babel-polyfill', 'src/index.js']。

   長所：
   一度導入し、グローバルに使用。
   インスタンスメソッドと静的メソッドは、より包括的な変換されます。

   短所：
   グローバルスコープの影響。
   パックから抜け出すことは、それに演じてきたために、比較的大きなどんなに無用です。

   使用シナリオ：
   より包括的なビジネスのプロジェクトの開発は、それほど問題は、上記ios8では、このようなアプローチObject.assignまたはポリフィルの必要性として、見逃すことはありません。

2. バベル - ランタイムの別々の導入

   異なるポリフィルの入口に直接導入、ポリフィルプラグイン・モジュールは、プライベートに組み込まれます。
   手動で導入するポリフィル必要性については、import Promise from 'babel-runtime/core-js/promise'

   長所：
   モジュールは、プライベートでグローバルスコープには影響しません。
   素晴らしいことではないだろうなぜなら、オンデマンドパッケージの導入のパックから抜け出します。

   短所：
   彼らはグローバルスコープには影響を与えませんので、それはインスタンスと静的メソッド、そのようなAPIをオンにしません。
   希望の手動導入は、それが欠落している可能性があります。

   使用シナリオ：
   開発ライブラリ、フレームワークなどは事のあなたの知識を持つ他の人の場合のように、使用することができ、その後、あなたは恥ずかしい間違いに、その後、他の誰かの地球環境を変更し、。

3. 導入された使用バベル・プラグイン・変換・ランタイムデマンド

   このプラグインは簡単ではなかった、いくつかの機能があります。

   1. 民間の導入などポリフィルとプラグインバベル・ランタイムは、グローバルスコープには影響しません。そして、自動デマンドポリフィルの導入は、手動バベルランタイムとして一つ一つを紹介することを避けるために、必要。
   2. 各モジュールは、参照として生成されたときにさまざまなヘルパー構文変換を抽出することができます。
   3. 自動変換ジェネレータ/非同期。

   長所：
   モジュールは、プライベートでグローバルスコープには影響しません。
   素晴らしいことではないだろうなぜなら、オンデマンドパッケージの導入のパックから抜け出します。
   漏れを防ぐために、需要の自動導入、ノーマニュアル、。
   大幅に冗長コードを減らす、ヘルパーを抽出します。

   短所：
   彼らはグローバルスコープには影響を与えませんので、それはインスタンスと静的メソッド、そのようなAPIをオンにしません。

   使用シナリオ：
   バベルランタイムと。

   注：プラグインの依存関係のバベル - ランタイム。

4. バベルプリセット-ENV構成アイテムに配置され

{
   "presets": [
   	[
   		"env", 
   		{
   			"useBuiltIns": boolean
   		}
   	]
   ]
}

入口を分割するuseBuiltInsオプションimport 'babel-polyfill' / require(babel-polyfill)ポリフィルを導入することにより、環境へ。第1の実施形態は、同様のポリフィルに導入されているが、少し良く、環境の構成によれば、必要に応じて組み込まれます。

要約：
コア1 babel6はバベルコアバベル-CLI babel-有するノードバベルレジスタ・バベル-ポリフィルが、 これらはbabel7に変更されます。
2.ポリフィルがコアJSに依存して
3 babel7.4放棄@バベル/ポリフィル2又は3 @コアJSに直接依存します。

バベル・プラグイン・変換・ランタイム構成項目

{
  "helpers": false, // defaults to true
  "polyfill": false, // defaults to true
  "regenerator": true, // defaults to true
  "moduleName": "babel-runtime" // defaults to "babel-runtime"
}

自動処理及びヘルパー依存ポリフィルのバベル - ランタイムの抽出のためには、その結果、依存関係プラグインバベルランタイムを終了します。

ポリフィル例

入力：

var promise = new Promise;

出力：

var _promise = require("babel-runtime/core-js/promise");  // 注意这里，根本是从core-js里面引入的
 
var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var promise = new _promise2.default();

ヘルパー例：

入力：

class Person {}

通常に変身：

"use strict";
 // 这就是helper函数，每个模块都会被实现一遍，十分浪费，冗余。
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
var Person = function Person() {
  _classCallCheck(this, Person);
};

ランタイムターンで：

"use strict";
 
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck"); // 从runtime中引入，没有再实现一遍
 
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};

発電機もされてrequire("babel-runtime/regenerator");導入しました。

babel7

babel7は、主要な変更を加え放棄されたstage-xプリセットを、また@バベル、プラグインプラグイン公式及び非公式/コア、@バベルを区別するための名前空間を追加 / CLI など。

推奨@バベル/プリセット-ENV。

@バベル/プラグイン・変換・ランタイム

プラグインの導入は、2つの主な作用を有します

> @バベル/プラグイン・変換・ランタイム - babel7では、オリジナルのプラグインバベル・プラグイン・変換・ランタイムはまた、変更を行いました。そして機能で強力になります。

設定項目を削除します（デフォルトはポリフィルある）corejs設定項目を追加して、ティムをポリフィル。

.babelrc設定：

{
  plugins: [
    ["@babel/plugin-transform-runtime", {
      "absoluteRuntime": false, // 不是很清除干啥的
      "corejs": false, // 下面详解
      "helpers": true, // 助手函数是否提取，同babel-plugin-transform
      "regenerator": true, // 同babel-plugin-transform
      "useESModules": false
    }]
  ]
}

設定項目についてはcorejs: false | 2 | 3。

偽バベル/ランタイム@頼り、実際には、設定ポリフィルは、デフォルトのオプションです。
2依存バベル@ /ランタイム-corejs2
。3依存する@バベル/ランタイムcorejs3

corejs2とcorejs3まだ非常に異なります。プロトタイプでcorejs2変換のみグローバル変数（オブジェクト）及び静的メソッド（Object.assign）、ない変換方法（Array.prototype.includes）、プロトタイプにcorejs3方法が変換されます。

注変換ランタイムプライベートで、それが地球環境に影響を与えるだけでなく、導入を求めて、とても素敵ではないだろう、このプラグインポリフィルを追加します。

概要：
@バベル/プラグイン・変換・ランタイムは、3つの主要な機能があります
-ときgenerators/asyncの時間自動導入@babel/runtime/regenerator。
- APIとして実装された新機能を追加します。
-参照を尋ね各インラインモジュールヘルパーを抽出します。

@バベル/プリセット-ENV

上記の言ったことに加えて@babel/plugin-transform-runtime、プラグ、私が記録したいと思います@babel/preset-envポリフィルに変化が。

彼は、多くの機能を取っbabel6でこのプリセットは、この資料では、関連する構成とポリフィルを記録し、useBuiltInsそしてcorejs。

useBuiltIns

@バベル/プリセット-ENVいくつかの選択肢の拡大の中の設定項目バベルプリセット-ENVのboolean値である"useage"とは"entry"。

デフォルト値は、それが自動的にpolyfillsを導入していないだろう、偽で、かつプロセスのインポート「@バベル/ポリフィル」とインポート「corejs」をしません。

注：babel7.4はあきらめて@babel/polyfill、それを直接使用することが提案されていますcorejs。

エントリ

そして、オプションを自動的ポリフィルを導入し、環境部門のニーズに応じてのような真のバベル-プリセット-ENVを。注だけ入り口に一度導入することができ、多くの人が文句を言うでしょう。

あなたは入学書類を持っている必要がありますimport "core-js/stable"とimport "regenerator-runtime/runtime"。

使用法

需要の導入は、世界的な環境汚染の原因となります。私の理解では、このオプションは単にエントリの強化、入り口でマニュアルを導入する必要があり、どのくらいの需要が使用特性に合わせて導入することができるです。

corejs

発見：2、または3 { version: 2 | 3, proposals: boolean }、デフォルトは2です。

これは、新しく追加された設定項目です。このオプションになるだけuseBuiltInsオプションusageまたはentryと@babel/preset-env作品であれば、対応するインポートcorejsの正しいバージョン。

デフォルトでは、ECMAScriptのプロパティの安定化のみを注入します。変更することができる3つの特徴があります。

• その時の構成は、useBuiltIns: "entry"直接提案インポートすることができますimport "core-js/proposals/string-replace-all"
• 使い方2つのオプションがあります。その時useBuiltInsと：
  • shippedProposals（別の構成アイテム@バベル/プリセット-ENVの）オプションがtrueに設定されています。これは、ブラウザのポリフィルと変換にいくつかの時間のために提供されている提案を可能にします。
  • 使用corejs: {version：3，proposal：true}。各コアJSのためのそのようなパディングが提案を実現することができるサポート。

参照

バベルバベル公式サイト@ /プラグイン・変換・ランタイム
NPM->バベル・プラグイン・変換・ランタイム
を構成する方法最後にバベル？
バベルマニュアル
バベルには、JavaScriptコンパイラです
babel7の簡単なアップグレード