ES6学習（a）ツールの使用--babel

Es6 Learning Use Tools Babel

バベルツールが導入されました

babelは、es6を変換するために使用されます。上記のコードのバージョンは下位互換性のあるツールJS構文であるため、コードは現在のバージョンと古いバージョンのブラウザーで正しく機能します。

babelオンラインサイトがあり、2つの方法でローカルに実行されます。

オンラインサイトの利点は便利ですが、プログラムコード全体を比較したい場合は、オンラインサイトがあまり快適ではないため、今回はローカルダウンロードツールを選択できます。ダウンロードの手順を以下に説明しますおよび構築する環境。

コマンドラインを開き、比較するプロジェクトファイルを見つけて、次のように入力します。
npm init -yを実行し、ファイルpackage.jsonを作成します
コア機能を提供するモジュール全体をダウンロードするツールのコアであるnpminstall @ babel / coreの実装
プラグインのコレクションであるnpminstall @ babel / reset-envの実装では、異なる構文のダウンロードを回避する必要があります。異なるプラグインをダウンロードすると、es5のすべてのes6文法を変換できます。
npm install @ babel / cli、jsファイルの実装主な機能はコマンドラインnpx変換をコンパイルすることです

ダウンロードした後、ツールの構成ファイルをセットアップするようなwebpackのようなものが必要です。これには、ドキュメント管理の使用方法が記載されています。

同じレベルのnode_moudulesにプロファイル.babelrcを作成します。その目的は、コンパイルするファイルをコンパイルするときに使用するプラグインに通知することです。
このドキュメントは厳密にJsonであるため、二重引用符で囲む必要があります
プリセットとして意図されたプリセット。プラグインに書き込むことができる場合は、他のプラグインも必要です。

{ 'presets':[ '@babel/preset-env' ], 'plugin':[ ... ] } Copy the code

babel関連情報をダウンロードして構成した後、実際には何が簡単に使用できるかがわかり始めます。

ファイル名に特殊文字はありません
コマンドラインで各変更を実行する必要があると感じた場合、多くのトラブル、時間の無駄が増加する可能性があります--watch back in command、完全なnpx babel a.js -o b.js --watch、これはリアルタイム監視コンパイラです

欠陥がある前の構文、どのように改善できるか、新しい機能に直面したときにこれがなぜそうなのかを考えてみてください。

複製：https：//juejin.im/post/5d142cc8f265da1b7b319c32