es6からes5に変換されたbabelプラグインのインストールと使用

まず、npm、cnpm、yarnの3つのパッケージマネージャーのいずれかが必要です。このインストールは、Visual StudioCodeに基づいています。

vscodeのターミナルで実行されていることを意味します。ここに画像の説明を挿入開いたときに、ターミナルでコマンドを入力した後にエラーが報告された場合は、ノードがインストールおよび構成されていない可能性があります。オンラインで検索できます。構成後、コンピュータを再起動する必要があります。

  1. babel --versionと入力してもバージョン番号が表示されない場合は、次のコードを実行する必要があります。

    cnpm install -g babel-cli

  2. 新しいapp01フォルダー

  3. app01フォルダーに入り、現在のフォルダーをnodejsプロジェクトとして初期化します

    一連の操作の後、npminitまたは
    npminit -y
    は最終的にpackage.jsonファイルを作成します。これにより、プロジェクト全体の構成情報が保存されます。

  4. 新しいsrcフォルダーを作成し、srcフォルダーの下にa.jsを作成し、a.jsファイルにES6コードを記述します。leta
    = 1;
    let test =()=> {}

  5. バベルをインストールする

    cnpm install --save-devbabel-cliまたは
    cnpminstall --save babel-cli –save
    -devは、プロジェクト開発中にのみ使用される本番依存関係
    を意味しますsaveは、製品がオンラインのときにも使用される製品依存関係を意味します

  6. babelプリセットのインストール[変換ルール]

    cnpm install --save-dev babel-preset-latest

  7. プロジェクトのルートディレクトリに.babelrcファイルを作成して構成し、 "。"
    { "presets":["latest"] }に注意してください

  8. babelを使用して
    、srcパスのES6コードをES5コード変換します
    >
    app01パスのbabela.js
    > babel src / a.js

    展開:

    1. 単一のファイルの場合、a.jsをES5コードに変換した後にb.jsファイルが生成されます

      babel a.js --out-file b.js

    2. 複数のファイルがある場合は、その親フォルダーを直接変換します。srcフォルダーをES5コードに変換して、distフォルダーを生成します。

      babel src --out-dir dist

    3. package.jsonファイルで
      「scripts」を構成できます:{ "build": "babel src --out-dir dist"、}そして、プロジェクトのルートディレクトリでnpm run buildを実行するたびに、次のことができます。 src Convertを実行してから、distフォルダーからサインアウトします


おすすめ

転載: blog.csdn.net/weixin_49549509/article/details/108377401