Babel 7についての紹介

一、Babelの紹介
Babelは、ECMAScript 2015＋バージョンのコードを後方互換性のあるjavaScript文法に変換するためのツールチェーンであり、現在および古いバージョンのブラウザまたは他の環境で動作することができる.babel 7の重要な構成部分

@babel/cli

@babel/core

@babel/presete-env

@babel/polyfill

@babel/runtime

@babel/plugin-transform-runtime

@babel/plugin-transform-xxx

これらは私達がこれからよく使うbabelの各重要な部分です.ここで注意してください.これはbabel 7ならではのものです.次は適当にプロジェクトを建てます.例えばindex.jsの中にコードを書きます.

let fn = () => console.log('Hello World')

そして、私たちはそれを放置して、一歩ずつ勉強したいと思います.
二、@babel/cliと@babel/core
@babel/cliはBabelが提供する内部建設のコマンドラインツールで、主にbabelというコマンドを提供してjsファイルをコンパイルして、プロジェクトにインストールするのに適しています.ただnpm install@babel/cliだけでbabel index.jsを実行するのは成功しません.Babelのコア機能は@babel/coreモジュールに含まれているからです.だから@babel/coreをインストールして実行します.

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

私たちはバベルで上のindex.jsを実行します.

babel index.js

発生したコードは何の変化もないことが分かりました.他の組み合わせが必要なようです.他のオプションを設定し続けます.
三、@babel/preset-env
本当にBabelを実際に動作させるのはプラグインです.上記のコードを例にして、矢印関数を変換したいです.プラグインが必要です.コマンドラインを入力します.

npm install --save-dev @babel/plugin-transform-arrow-functions

babelrcというプロファイルを作成します.@babel/cliは呼び出し時に呼び出します.Babelrcファイルの内容は以下の通りです.

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
  ]
}

再コンパイルすると、矢印関数は矢印関数ではないことが分かりますが、他のES 6の新しい特性も転化します.例えば、constまたはletをvarに変換するには、プラグイン@babel/plugin-tranform-block-scopingが必要です.classキーワードを従来の原型に基づいたものに変換するには、プラグイン@babel/plugin-trans form-classingが必要です.だから、ES 6を使う時、大量のプラグインを配置する必要があります.これは明らかに不合理です.そこで、Babelはプリセットの概念を提出しました.つまり、事前に一連のプラグインパッケージを作ってくれました.
私たちはbabelrcのプロファイルに以下のような構成をしています.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4"
        }
      }
    ]
  ]
}

注:targettsは、node環境を設定できるほか、各ブラウザ環境に対する設定も可能です.上記の構成により、運転後、現在のコードについては問題がないことが分かりました.
四、@babel/polyfill
私たちはindex.jsのコードを次のように変更します.

const m = [1,2,3].findIndex(x => x == 1)

コンパイルされたコードは以下の通りです.

"use strict";

var m = [1, 2, 3].findIndex(function (x) {
  return x == 1;
});

このコードが低バージョンのブラウザで実行されると、必ずエラーが発生します.低いバージョンのブラウザでは、配列例にincludesメソッドがありません.このような場合は、構文変換は高バージョンの文法を低バージョンに変換するだけで発生しますが、新しい内蔵関数、実例方法は変換できません.そこにオリフィルが登場しました.
名前の通り、polyfillの中国語の意味はスペーサーです.スペーサーというのはバーンとは違ったブラウザや異なる環境の下での違いです.新しい内蔵関数や実例の方法などを低バージョンのブラウザでも使えます.
まず@babel/polyfill依存をインストールします.

npm install --save @babel/polyfill

私達は私達のコードの中でpolyfillに導入する必要があります.

import '@babel/polyfill';
const m = [1,2,3].findIndex(x => x == 1)

このコードは低バージョンで実行できますが、すべてのpolyfillをロードする必要はありません.これは最終的に構築されたパッケージの体積が大きいことをもたらします.この問題を解決するために、@babel/presete-envはuse BuiiltInsパラメータを提供します.設定値がusageの場合、コードに必要なpolyfillだけが含まれます.このパラメータの値をusageとして設定するには、corejsを同時に設定しなければなりません.(設定しないと、警告が与えられます.デフォルトでは「corejs」です.2)、より多くの新しい特性を使用できるように、core-を使用することをお勧めします.js@3.
そこで私たちは.babelrcの配置ファイルに次のように配置しました.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4"
        },
         "useBuiltIns": "usage",
         "corejs": 3
      }
    ]
  ]
}

このようにコンパイルしたコードは次の通りです.

import "core-js/modules/es.array.find-index";
var m = [1, 2, 3].findIndex(function (x) {
  return x == 1;
});

このように私達はfindIndex関数が必要です.polyfill内のfindIndex関数だけを包装する必要があります.
五、@babel/plugin-tranform-runtime
私たちはindex.jsのコードを修正しました.

class A {
    constructor (name) {
        this.name = name
    }
}
const a = new A()

コンパイルされたコードは以下の通りです.

import "core-js/modules/es.function.name";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var A = function A(name) {
  _classCallCheck(this, A);

  this.name = name;
};

var a = new A();

今から考えてみます.もし複数のjsファイルにクラスがあるなら、コンパイルされたファイルごとにクラスがありますか?classicallCheck関数.この問題を解決するために、babelは@babel/plugin-transform-runtimeプラグインを持っています.@babel/plugin-transform-runtimeプラグインを使って、すべてのヘルププログラムはモジュール@babel/runtimeを参照します.そうすると、コンパイル後のコードに重複したヘルププログラムが現れないようにして、効果的にパッケージの体積を減らすことができます.
@babel/plugin-transform-runtimeは@babel/runtimeと連携して使用する必要があります.
まずインストールに依存します.@babel/plugin-transform-runtimeは通常開発時のみ使用しますが、運転時の最終コードは@babel/runtimeに依存しますので、@babel/runtimeは生産依存としてインストールされなければなりません.

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

修正.babelrcの配置は以下の通りです.

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime"
        ]
    ]
}

コンパイルしたコードは:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

require("core-js/modules/es.function.name");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var A = function A(name) {
  (0, _classCallCheck2["default"])(this, A);
  this.name = name;
};

var a = new A();

この時、_を発見しましたclassCallCheck 2関数は、直接コードに関数を挿入するのではなく、導入された方法である.
今findIndex関数に戻ると言っていますが、コンパイルしたらrequire(「coree-js/modules/s.array.find-index」)ができます.このような方式はAray.prototypeを修正して、大域汚染します.この問題を防ぐために、プラグインにはもう一つの役割があります.もちろん私たちは@babel/plugin-transform-runtimeに配置情報を追加したいです.まず依存@babel/runtime-corejs 3を追加します.

npm install @babel/runtime-corejs3 --save

設定ファイルを変更

{
    "presets": [
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",{
                "corejs": 3
            }
        ]
    ]
}

コンパイルしたコードは

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));

var _context;

var m = (0, _findIndex["default"])(_context = [1, 2, 3]).call(_context, function (x) {
  return x == 1;
});

上記のようにAray.prototypeは直接修正されません.全体の汚染を避ける.
おわりに
私はよくBabelの配置についての文章を見ましたが、体系的な説明が特によく分かりませんでした.本文は基本的に文章の作者の考え方によって、自分で整理しました.この文章を見て、もっと深く理解したいなら、原作者の文章も参考にしてください.参照リンク見逃せないBabel 7の知識