メイン / 方法

Babel7を始めましょう

JavaScriptは、エコシステムの幅が広いために独特です。新しい標準は構文糖衣構文を追加しますが、ブラウザーでそれらをサポートするには時間がかかります。 Babelは、自動トランスパイルを介してこの問題を回避します。

製品の背後にある考え方は単純です。BabelはES6またはES7コードを取り込み、新しい構文要素をエミュレーションコードに置き換えます。その出力は、従来のJavaScript構文を確認し、InternetExplorerなどの古いブラウザーで実行されます。

バベルの最初のリリースは世界を席巻しました。最初に登場してすぐに、React、Vue、Emberなどのさまざまなフレームワークがそれを採用しました。開発者は、バックグラウンドで動作することを知らずに製品を使用することがよくあります。複数の人気のあるnpmプロジェクトがBabelに依存しています。

アプリの作り方

これらの依存関係は、前任者の解放プロセスを対立に満ちた事件に変えました。バージョン7は、まだ小規模なメンテナチームによって管理されているため、可能な限り互換性を持たせようとしました。コード生成の品質は高いままですが、重大な変更はほとんどありません（チームで作業している場合は、ドキュメントをクラウドストレージ結束を保つのに役立ちます）。

これまでBabelを使用したことがない場合は、これをガイドにしてください。互換性の心配なしに高度なJavaScript機能を使用できるため、作業がはるかに簡単になります。

プロセスを合理化するためのツールが必要ですか？最高のガイドウェブサイトビルダー役立ちます。長期的なサポートが必要ですか？正しくするウェブホスティングサービス。

01.バージョンチェック

Babelは通常、Nodeランタイム環境に住んでいます。使用されているバージョンを確認することから始めましょう。出力は、次の記事の作成に使用されたUbuntu14.04ワークステーションで見つかったバージョン状態を提供します。これは衒学者ではありません。このステップに付随する図は、Babelチームがかなりの数のNode.jsバージョンのサポートを終了したことを示しています。

tamhan@tamhan-thinkpad:~$ node --version v8.14.0 tamhan@tamhan-thinkpad:~$ npm --version 6.4.1

02.パッケージ名の変更

バージョン7での重大な変更の1つは、Babelパッケージを独自の名前空間に移動することです。古いパッケージは、さまざまなリポジトリから削除されませんでした。従来のパッケージ名を使用すると、この手順に付随する図に示す状況が発生するため、これは重要です。

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @ babel/preset-env @babel/node . . . + @babel/core@7.2.0 + @babel/node@7.2.0 + @babel/cli@7.2.0 + @babel/preset-env@7.2.0

03.ビルドアクションを追加します

上記の手順は、npmプロジェクト内で作業することを前提としています。その場合、ビルドアクションを介してBabelを実行するのは簡単です。開いた package.json 以下のコードに示すように変更します。

{ . . . 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1', 'build': 'babel index.js -d lib' },

04.コードを手作業でトランスパイルする

Babelを機能させるには、ビルドアクションを実行する必要があります。これは、npmrunコマンドを使用して実行するのが最適です。ザ・ -d 値は、結果をに配置する必要があることをBabelに通知します lib フォルダ–この手順に付随する図は、フォルダがその場で作成されることを示しています。

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build > workspaceb7@1.0.0 build /home/tamhan/ workspaceB7 > babel index.js -d lib Successfully compiled 1 file with Babel.

05.構成の質問

追加の構成オプションなしでBabelを呼び出すと、トランスパイルは有効になりません。フレームワークがターゲット環境に関する詳細情報を受信した場合にのみ、コードをトランスパイルできます。これは、コマンドラインパラメータを介して、またはというファイルを作成することによって実行できます。 .babelrc プロジェクトルート内。

06.babelrcを構成します

Babelは、プラグインのセットを介して自身を構成します。各プラグインは、コードベースにトランスパイル変換を適用します。私たちは使用します プリセット環境 パッケージ–ほとんどのベースをカバーすることを目的とした事前構成された一連の変換が付属しています。

{ 'presets': ['@babel/preset-env'] }

07.試乗の時間

index.jsに新時代のJavaScriptを少し追加して、ライブコードに対してプログラムをテストします。この手順に付随するコードは、従来のブラウザーでは機能しません–完了すると、暗黙の関数は正常図に示すように、宣言。

function tamstest(){ [1, 2, 3].map((n) => n + 1); }

08.ターゲティングを調整する

プリセット環境 ほとんどのトランスピレーションをデフォルトで適用します。この製品の目標は、帯域幅やパフォーマンスのコストに関係なく、普遍的に互換性のあるJavaScriptを作成することです。を渡すことで構成を変更できます ターゲット オブジェクト–以下の例は、ChromeとIEの特定のバージョンを対象としています。

{ 'presets': [ [ '@babel/preset-env', { 'targets': { 'chrome': '58', 'ie': '11' } } ] ] }

09.高度なターゲティング

Babelのブラウザターゲティングは、ChromeとInternetExplorerに限定されていません。との協力のおかげで browserslist 、開発者は、以下に示すように、12を超えるターゲットから組み合わせて組み合わせることができます。

名前では大文字と小文字は区別されません。

アンドロイド AndroidWebViewの場合。
Baidu Baiduブラウザ用。
BlackBerry または bb ブラックベリーブラウザ用。
クロム GoogleChrome用。
ChromeAndroid または and_chr Chrome forAndroid用。
縁 MicrosoftEdge用。
電子 Electronフレームワーク用。 Chrome版に変換されます。
冒険者 または すなわち InternetExplorer用。
ExplorerMobile または ie_mob Internet ExplorerMobile用。
Firefox または ff MozillaFirefox用。
FirefoxAndroid または and_ff Firefox forAndroidの場合。
ios または ios_saf iOSSafari用。
ノード Node.js.Opera forOperaの場合。
Opera Miniは または op_mini OperaMini用。
OperaMobile または op_mob OperaMobile用。
QQAndroid または and_qq Android用QQブラウザ用。
サファリ デスクトップSafari用。
サムスン サムスンインターネット用。
UCAndroid または and_uc Android用UCブラウザ用。

10.高度なターゲティング、パート2

Browserlistは、高度なクエリを受け取ることもできます。そのホームページ構成オプションをリストします。これらのほとんどすべては、変更することでBabel内でも使用できます。 babelrc 。ワークステーションにnpxがインストールされている場合、クエリはローカルで評価できます。

{ 'targets': '> 0.25%, not dead' }

11.自動トランスパイル

手でバベルを呼び出さなければならないことはすぐに退屈になります。 nodemonユーティリティは、ファイルシステムリソースを監視し、変更が検出されるとコマンドを実行します。理論的には、nodemonサポートの追加は、への小さな変更によって処理されます。 package.json 。

{ 'name': 'workspaceb7', . . . 'main': 'index.js', 'scripts': { 'start': 'nodemon --exec babel-node index.js',

12.存在を確認します

一部のワークステーションには nodemon グローバルにインストールされます。そうでない場合、プログラムを呼び出すと、以下に示すようなエラーメッセージが表示されます。幸いなことに、展開 nodemon を介して簡単に達成されます npmインストール コマンド。

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

13.機能を確認します

発射します 海抜スタート ターミナルウィンドウで、の内容の変更に進みます index.js geditや VisualStudioコード。保存後、 nodemon ステータス情報を出力します。

[nodemon] restarting due to changes... [nodemon] starting `babel-node index.js` [nodemon] clean exit - waiting for changes before restart

14.トランスパイルを修正する

一方 nodemon の検出は、この時点で問題なく機能するはずです。 index.js にあるファイル lib 更新しないでください。これはの素晴らしさによって引き起こされます バベルノード –トランスパイルされたファイルをディスクにコミットしません。代わりに、トランスパイルされたファイルで機能するNodeCLIの変更バージョンを起動します。

15.プログラムでコードをトランスパイルする

Babelは、コマンドラインでの作業に限定されていません。正しいパッケージがインストールされていれば、コードを別のプログラムからトランスパイルすることもできます。このステップに付随するスニペットは、一連の基本的な変換を入力文字列に適用します。構成設定は、通常、から取得されることに注意してください。 babelrc ファイル。

var babel = require('@babel/core'); import { transform } from '@babel/core'; import * as babel from '@babel/core'; babel.transform('code();', options, function(err, result) { result.code; result.map; result.ast; });

16.ファイル全体をトランスパイルする

通常、ソースコードは文字列変数に格納されません。 Babel APIは、ファイル名を持つ変数の入力文字列を無視する一連のファイル関連関数を介してこれを説明します。ただし、結果は通常のJavaScript変数として返されます。

babel.transformFile('filename.js', options, function (err, result) { result; // => { code, map, ast } } );

17.同期と非同期

Babel 7は、ほとんどのAPI呼び出しの同期バージョンと非同期バージョンを導入しました。ニーズに合ったものを選択してください。小さな例のトランスパイルはその場で実行できますが、より複雑なファイルでBabelを緩めると、遅延が数十秒に達する可能性があります。

18.個々のプラグインについて学ぶ

バックグラウンドで何が起こっているのか疑問に思ったことがある場合は、次のWebサイトにアクセスしてください。このページ。これは、現在Babelディストリビューションに含まれているすべてのプラグインのリストを提供し、独自のプラグインを作成しようとしているすべての人のためのいくつかのヒントも含みます。

19.TypeScriptの詳細を取り除く

Babelは、新時代のJavaScript要素のトランスパイルに限定されていません。この製品には、機能に制約のあるTypeScriptエンジンが含まれています。入力情報を取り除き、高度な要素を置き換えます。残念ながら、Babelは型チェックを実行しません。これにより、TypeScript言語の最も重要な利点の1つが失われます。

{ 'presets': ['@babel/preset-typescript'] }