[Babel] Babel

BabelはJavaScriptコンパイラです.
バベルはECMAScript 2015+で作成したコードを旧バージョンのJavaScriptファイルに変換し、互換性を維持してすべてのブラウザで実行します.また、タイプスクリプト、JSXなど他の言語の分類も含まれています.

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

デフォルトの動作
バーベルは3段階に分けて構築される.
1.分割(Parsing)-コードを読み込み、抽象構文ツリー(AST)に変換します.
2.変換(Transformation)-抽象構文ツリーの変更
3.出力(Printing)-変更された成果物を出力します.
バーベルはグループ化と出力のみを担当し、変換タスクはプラグインで処理され、プラグインをインストールします.
使用方法
設定

npm i -D @babel/core @babel/cli @babel/preset-env
npm i  @babel/polyfill

babel-cli
最も一般的な形式babel src -d dest --compact=true --source-maps

--presets=env:.babelrcbabel.config.js省略可能

-o [dest파일명]:変換後destファイル名で保存

-w:リアルタイム変更反映(-o [dest파일명]併用)

-d[dest폴더명]:変換後destフォルダ名で保存

--compact=true:コード圧縮(スペース、行ブレーク)

--source-maps:--compact=true使用時のデバッグ(開発者ツール)が困難なため、ソースファイルへのマッピングエラー

プリセット
バーベルを使用する場合、プラグインを1つずつ設定するのは難しいです.したがって、目的に応じて様々なプラグインを組み合わせて「プリセット」と呼ぶ.
プリセット-envはECMAScript 2015+を変換するために使用されます.以前は毎年プリセットがありましたが、現在はプリセット-envに統一されています.
ポリエステル
バベルは、ECMAScript 2015+をECMAScript 5に変換できるバージョンのみを構築します.そうでなければ、「マルチセグメント文字」と呼ばれるコードセグメントを追加することで解決できます.(ex,Promiseオブジェクト)
babel.config.js設定

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 2, // 기본 값
        },
      },
    ],
  ],
}

usebuiltIns(多段充填動作)-usage、entry、false(デフォルト)
USageまたはentryを設定すると、マルチセグメントパッケージのcore-jsがモジュールにインポートされます.
Webパッケージへの統合
実際の作業環境では、バーベルを直接使用するよりも、Webパッケージに統合するのが一般的です.babel-loaderはRoder形式で提供されます.

npm install -D babel-loader

Webパッケージ設定へのロードプログラムの追加

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // .js확장자로 끝나는 파일을 처리
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

ポリエステルを使用する場合はcore-jsを取り付ける必要があります.WebPackはBarbeloaderが作成した次のコードに遭遇したときにcore-jsを見つけるからです.

require("core-js/modules/es6.promise")
require("core-js/modules/es6.object.to-string")

圧縮minifyコード
minifyパッケージをインストールして、導入前にコードを圧縮します.

npm install --save-dev babel-preset-minify

babel.config.jsファイルの変更

module.exports = {
  presets: ["@babel/preset-env", "minify"],
}

npm run buildの実行中に「Coldn't find交差」エラーが発生しました.
babel.config.jsファイルを次のように変更します.

 module.exports = {
    "presets": [
	"es2015",
	["minify", {builtIns: false, evaluate: false, mangle: false}]
	]
}

整理する
バーベル:さまざまなブラウザでループアプリケーションを作成するためのツール
バーベルコアグループ、出力/プラグイン-変換
プリセット:セットECMAScript+環境内の複数のプラグインenvプリセットを使用する
FDD:バーベルが変換されていないコードを変換するコードです.
Webパッケージとしてbabel-loaderが一般的に使用されています