es6実行環境の構築方法

構築手順: 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 トランスコーディングに使用されます。これは、プロジェクトを実行するにはグローバル環境に Babel が必要であることを意味します。これは、プロジェクトが環境に依存していることを意味します。一方で、これは、Babel の異なるバージョンを使用する異なるプロジェクトをサポートすることもできません。

1 つの解決策は、プロジェクトに

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: (ローカル プロジェクトとディレクトリを作成する)

新しいフォルダーをローカルに作成し、名前を es6test に変更し、vscode コード エディターで開き、そのフォルダーの下に 2 つの新しいファイル (プロジェクト ファイル src とパッケージ ファイル dist ファイル) を作成します。 src フォルダー内に新しいindex.htmlファイルを作成し、新しいindex.jsファイルを並べて作成し、index.jsファイルをindex.html

#に導入します。

##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

これは私が期待していたものではありませんでした。それは絶対にうまくいきません！ dist ファイルの下にindex.js ファイルが生成されましたが、es5 構文には変換されませんでした

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

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

次のコンテンツが package.json に表示されます。おめでとうございます。すべての依存パッケージがインストールされました。

ステップ 3: (root .babelrc ファイルの設定ディレクトリ)

#

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

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

cnpm run build

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

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

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