構築手順: 1. 構文「npm install --save-dev babel-cli」を使用して babel-cli ツールをインストールします; 2. 構文「npm install --save-dev babel-」を使用して依存関係をインストールしますpreset-es2015 babel-cli"; 3. ルート ディレクトリに「.babelrc」ファイルを設定し、トランスコーディング ルールを設定します。 4. package.json 内のスクリプト コマンドの実行項目を変更します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 の利点 (本題から外れます):

es6 は ECMAScript2015 です。 es6 は js のサブセットですが、私たちが一般的に扱う js は es6 より前のバージョンです。 js 自体は非常に不完全な言語ですが、es6 は構文シュガーを通じて js の多くの醜い部分を隠しています。フロントエンドとバックエンドの非同期リクエストメソッドを含む、JavaScriptデータ処理、アロー関数、構造化代入、デフォルトパラメータ（デフォルトパラメータ）、クラス（クラス）、モジュール（モジュール）などの多くの機能を提供します。大規模なフロントエンドで遭遇する問題を解決します。

es6 の開発環境構築 (es6 から es5 へのトランスコード)

仕事をうまくやりたければ、まずツールを磨かなければなりません（笑）。ステップは、es6 開発環境を 1 つ構築することです。以前のバージョンのブラウザでは es6 構文がサポートされていないため、実行環境で es6 構文を es5 構文に変換する必要があります。Webpack には vue の自動コンパイルおよび変換機能があります。Webpack に加えて、babel も使用できます

Babel の使用規則

Babel は、ES6 コードを ES5 コードに変換して既存の環境で実行できる、広く使用されているトランスコーダーです。

これは、既存の環境が ES6 をサポートしているかどうかを心配することなく、ES6 でプログラムを作成できることを意味します。以下に例を示します。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1. インストール babel

Babel は、コマンド ライン変換コード用の babel-cli ツールを提供します。 。

インストールコマンドは次のとおりです:

//需要先安装babel-cli
npm install --global babel-cli

2. 設定ファイル .babelrc

Babel の設定ファイルは ## です。 #.babelrc、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを構成することです。

{
  "presets": [],
  "plugins": []
}

presets フィールドは、トランスコーディング ルールを設定します。次の公式ルール セットが提供されています。必要に応じてインストールできます。

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

.babelrc に追加します。

//例如：按需求添加
{
    "presets": [
      	"es2015",
      	"stage-2"
    ],
	"plugins": []
}

3. 使用方法

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

ログイン後にコピー

babel-cli をインストールすることです。

# 安装
npm install --save-dev babel-cli

package.jsonを書き換えます。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

npm run build

10,000 回読んだ後は、自分で練習したほうがよいでしょう。

ステップ 1: (ローカル プロジェクトとディレクトリを作成する)

##2 番目のステップ: ( プロジェクトを初期化し、トランスコーディング依存関係パッケージを追加します) vscode ターミナル Ctrl ~ を開き、ファイル ルート ディレクトリでプロジェクトを初期化します:

npm init -y

は package.json ファイルを生成します。 -y の目的は、初期化中にデフォルト値を構成し、生成されたファイル内でそれを変更することです。

npm は遅すぎます。まず cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

babel-cli

cnpm install -g babel-cli

babel src/index.js -o dist/index.js

次に、2 つの依存パッケージをローカルにインストールします

cnpm install --save-dev babel-preset-es2015 babel-cli

#

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

cnpm run build

你也可以在src/index.js中再写些es6的语法，测试下。

【相关推荐：javascript视频教程、编程视频】

以上がes6実行環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。