Babel 7 を始める
JavaScript は、エコシステムの幅の広さにより、ユニークです。 新しい標準は構文的な糖を追加しますが、ブラウザーでサポートされるようになるには時間がかかります。 Babel は、自動的な変換によりこの問題を回避します。
製品の背後にある考え方は単純です。 Babel は ES6 または ES7 コードを取り込み、新しい構文的要素をエミュレーション コードに置き換えます。 その出力は古典的な JavaScript 構文を確認し、Internet Explorer のような古いブラウザで動作します。
Babel の最初のリリースは世界を驚かせました。 最初に登場した後すぐに、React、Vue、Ember などのさまざまなフレームワークがこれを採用しました。 開発者はしばしば、バックグラウンドで動作していることを知らずに製品を使用しています。複数の人気のある npm プロジェクトが Babel に依存しています。
- How to make an app
これらの依存関係は、前任者のリリース プロセスを紛争だらけの事件に変えました。 Version 7 は、現在も小規模なメンテナ チームによって管理されており、可能な限り互換性を保つように努めています。 破損するような変更はほとんどなく、コード生成の品質は高いままです (チームで作業している場合、クラウド ストレージにドキュメントを保存すると、団結力を維持できます)。
Babel で作業したことがない場合、これがあなたのガイドとなるでしょう。 互換性の心配をすることなく、高度な JavaScript 機能を使用できることで、生活がずっと楽になります。
あなたのプロセスを合理化するツールが欲しいですか？ このような場合、「SkyDrive」を利用すると便利です。 長期的なサポートが必要ですか？ 適切な Web ホスティング サービスを入手しましょう。
バージョン確認
Babel は通常 Node ランタイム環境に住んでいます。 まずは使用されているバージョンの確認から始めましょう。 出力は、以下の記事を作成するために使用した Ubuntu 14.04 ワークステーションで見つかったバージョンの状態を提供します。 このステップに付随する図は、Babel チームがかなりの数の Node.js バージョンのサポートを停止したことを示しています。
tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1Change of package names
バージョン 7 のひとつの大きな変更は、Babel パッケージを独自のネームスペースに移動したことでした。 古いパッケージは、さまざまなリポジトリから削除されませんでした。 レガシー パッケージ名の使用は、このステップに付随する図に示すような状況を引き起こすため、これは重要です。
tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]Add a build action
上記のステップは、npm プロジェクト内で作業することを想定しています。 その場合、ビルドアクションを使用して Babel を実行するのは簡単です。 package.json を開き、以下のコードで示すように修正します:
{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},Transpile code by hand
Babel を動作させるには、ビルド アクションを起動する必要があります。 これは、npm run コマンドによって最もよく達成されます。 3052>
tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.A question of configuration
さらなる構成オプションなしで Babel を起動しても、トランスパイルは有効になりません。 フレームワークがターゲット環境についてのさらなる情報を受け取った場合にのみ、コードをトランスパイルすることができます。 これは、コマンド ライン パラメーターによって、または、プロジェクト ルートに .babelrc と呼ばれるファイルを作成することによって行うことができます。
Configure the babelrc
Babel はプラグインのセットによって自身を構成し、それぞれがコードベースにトランスパイルトランスフォームを適用するようにします。 preset-env パッケージを使用します – これは、ほとんどのベースをカバーすることを意図した変換の事前設定セットです。
{"presets": }Time for a test drive
いくつかのライブ コードに対してプログラムをテストするために index.js に少し新世代の JavaScript を追加します。 このステップに付随するコードは、レガシー ブラウザでは動作しません。
function tamstest(){.map((n) => n + 1);}Adjust targeting
preset-env はデフォルトでほとんどのトランスパイラを適用します。 下記の例では、Chrome と IE の特定のバージョンをターゲットにしています。
{"presets": ]}Advanced targeting
Babel のブラウザ ターゲットは、Chrome と Internet Explorer に限定されるものではありません。 browserslist との協力により、開発者は以下に示すように、12 以上のターゲットから組み合わせて使用することができます。
Advanced targeting, part two
Browserlist も高度なクエリを取ることができる。 そのホームページには、設定オプションがリストされており、そのほとんどすべては、babelrc を変更することによって Babel 内部で使用することもできます。
{"targets": "> 0.25%, not dead"}Automatic transpilation
手動で Babel を起動するのはすぐに退屈になります。 nodemon ユーティリティは、ファイルシステムのリソースを監視し、変更が検出されるとコマンドを発行します。 理論的には、nodemon サポートの追加は package.json への小さな変更で処理されます。
{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",Check for presence
ワークステーションによっては、nodemon がグローバルにインストールされているものもあります。 そうでない場合、このプログラムを起動すると、以下に示すようなエラーメッセージが表示されます。 幸いにも、nodemon の展開は npm install コマンドで簡単に行えます。
tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemonCheck functionality
ターミナル ウィンドウで npm start を起動し、gedit や Visual Studio Code などのエディタで index.js のコンテンツを変更するように進めてください。 保存後、nodemonはステータス情報を出力します。
restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restartFix transpilation
この時点でnodemonの検出は完璧に動作するはずですが、libで見つかったindex.jsファイルのコンテンツは更新されません。 これは、babel-node の巧妙さによって引き起こされます – それは、ディスクにトランスパイルされたファイルをコミットしないのです。 代わりに、トランスパイルされたファイルで動作する Node CLI の修正版を起動します。
Transpile code programmatically
Babel はコマンドラインでの動作に限定されません。 正しいパッケージがインストールされている場合、コードは別のプログラムからトランスパイルすることもできます。 このステップに付随するスニペットは、入力文字列に一連の基本的な変換を適用します。
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;});Transpile entire files
Source code is usually not get stored in string variables.The configuration settings, usually, is obtained from a babelrc file.Note in that the configuration settings, keeps into the mind. Babel API は、ファイル関連の一連の関数によってこれを考慮し、ファイル名を持つ変数のための入力文字列を見送ります。
babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});Sync and async
Babel 7 では、ほとんどの API コールに同期と非同期のバージョンが導入されました。 小さなサンプルはその場でトランスパイルできますが、より複雑なファイルで Babel を緩めると、簡単に数十秒に及ぶ遅延につながります。 3052>
Strip out TypeScript specifics
Babel は新時代の JavaScript 要素をトランスパイルすることに限定されません。 この製品には、機能に制約のある TypeScript エンジンが含まれています。 これは、型付け情報を除去し、高度な要素を置き換えます。 悲しいことに、Babel は型チェックを行いません。これは、TypeScript 言語の最も重要な利点の 1 つを排除しています。
{"presets": }Run Babel online
変換操作は通常スムーズに行われますが、時々問題が発生することがあります。 そのような場合には、Babel REPLが役に立ちます。 これはワークステーションのブラウザで Babel を実行し、入力と出力を隣り合わせに表示します。
Learn about pain points
The introduction explained that Babel sees widespread use across various projects. Babel のメンテナ チームは、詳細な変更ログによりバージョン アップグレードを簡素化しています。 Babel をプログラムで使用する場合は、API アップグレードガイドを参照することを忘れないでください。
この記事は、クリエイティブなウェブデザイン雑誌 Web Designer の 283 号に掲載されました。 3052>
- How to code faster, lighter JavaScript
- 5 awesome Javascript APIs
- 27 top-class website templates
Leave a Reply