構築手順: 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 は ECMAScript2015 です。 es6 は js のサブセットですが、私たちが一般的に扱う js は es6 より前のバージョンです。 js 自体は非常に不完全な言語ですが、es6 は構文シュガーを通じて js の多くの醜い部分を隠しています。フロントエンドとバックエンドの非同期リクエストメソッドを含む、JavaScriptデータ処理、アロー関数、構造化代入、デフォルトパラメータ(デフォルトパラメータ)、クラス(クラス)、モジュール(モジュール)などの多くの機能を提供します。大規模なフロントエンドで遭遇する問題を解決します。
仕事をうまくやりたければ、まずツールを磨かなければなりません(笑)。ステップは、es6 開発環境を 1 つ構築することです。以前のバージョンのブラウザでは es6 構文がサポートされていないため、実行環境で es6 構文を es5 構文に変換する必要があります。Webpack には vue の自動コンパイルおよび変換機能があります。Webpack に加えて、babel も使用できます
Babel は、ES6 コードを ES5 コードに変換して既存の環境で実行できる、広く使用されているトランスコーダーです。
これは、既存の環境が ES6 をサポートしているかどうかを心配することなく、ES6 でプログラムを作成できることを意味します。以下に例を示します。
// 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); //上面的原始代码用了箭头函数,这个特性还没有得到广泛支持,Babel将其转为普通函数,就能在现有的JavaScript环境执行了。
babel
Babel は、コマンド ライン変換コード用の babel-cli
ツールを提供します。 。
インストールコマンドは次のとおりです:
//需要先安装babel-cli npm install --global babel-cli
.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": [] }
# 转码结果输出到标准输出 $ 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
ステップ 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
次に、2 つの依存パッケージをローカルにインストールします
cnpm install --save-dev babel-preset-es2015 babel-cli
#
第四步:(package.json中修改scripts命令执行项)
第五步:(验收成果,哈哈!)
cnpm run build
你也可以在src/index.js中再写些es6的语法,测试下。
【相关推荐:javascript视频教程、编程视频】
以上がes6実行環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。