vscodeでnpmを使用してbabelをインストールする方法

序文

前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを使う方法を紹介します。
bableは、ES6コードをES5コードに変換できる、広く使用されているES6コンバーターです。

1. npmがすでにインストールされているかどうかを確認する

バージョン番号を取得するには、cmd に npm -v と入力します。これで、インストール中に新しいバージョンの nodejs によって npm が自動的にインストールされるようになりました。

繰り返しになりますが、管理者としてターミナルを開くのが最善です。

2. bableを設定する

ターミナルでbabelをインストールし、npm install –g babel-cliと入力します。

これは、VScode が bable を認識できるようにするためです。インストールが成功すると、次のようになります。

このプロセスは非常に遅いので、しばらくお待ちください。

3. VScodeで設定する

1. vscode ctrl+jを使用してvscodeの組み込みターミナルを開きます
2. ターゲットフォルダに入る[cdコマンドを使用]

実際、上記の bable を設定する 2 番目の手順も VScode ターミナルで実行する必要がありますが、何度か試して失敗したため、単純に外部ターミナルで設定しました。

3. ターミナルで npm init –y と入力してプロジェクトを初期化します。正しい結果は、bable フォルダーに package.json ファイルが表示されることです。

4. bableをインストールする
ターミナルでnpm install -–save-dev babel-preset-es2015 babel-cliと入力します。

このプロセスもかなり長くなります。

すでに Taobao ミラーをインストールしているので、nmp が失敗する可能性があるため cnmp も使用できますが、次のような状況が発生する可能性があります。

デモとしてcnmp -vを使用してバージョン番号を照会します

vscodeターミナルでcnmpを実行するとエラーが発生します。この時はターミナルでset-ExecutionPolicy RemoteSignedを実行するだけです。

これで、cnmp を通常通り使用できるようになります。
コードは次のとおりです（例）：

5. 新しい.babelrcファイルを作成し、設定ファイルの内容を設定します。

{
    // presets プロパティは、変換するソースコードでどの新しい構文機能が使用されているかを bakel に伝えます // js を es2015 に変換します
    "プリセット":["es2015"],
    // このプロパティは、どのプラグインを使用するかを bable に指示します // これらのプラグインは、コードの変換方法を制御できます "plugins": []
}

6. ファイル変換 新しいjsファイルを作成し、コンテンツ（es6形式）を入力して、ターミナルで変換します。
babel src/index.js –o dist/index.js
ここではtest.js->demo.jsを使って簡単なデモを作成します。

コマンドを入力すると、フォルダーに変換されたdemo.jsファイルが自動的に生成され、その中にはtest.jsのes6コードがes5に変換されたものが含まれます。

このステートメントは、単一のファイルを変換するために使用されます。同様に、フォルダー全体のすべての js ファイルを直接変換することもできます。

babel src –d dis //src-ソースフォルダ dis-変換されたフォルダ

リアルタイム変換を実現できるステートメントもあります

babel src/index.js –w –o dist/index.js
babel src –w –d dist

npm を使用して vscode に babel をインストールする方法についてはこれで終わりです。 vscode に babel をインストールする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。 今後とも 123WORDPRESS.COM をよろしくお願いいたします。