search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

Babel #19

Open hysryt opened 6 years ago

hysryt commented 6 years ago 
$ npm install @babel/core @babel/cli @babel/preset-env

https://babeljs.io/docs/plugins

パース => 変換 => ファイル生成 変換部分の処理はプラグイン(上の例では@babel/preset-env)として別モジュールで配布される 公式のプリセット（プラグインのセット）は以下の種類がある

hysryt commented 6 years ago

Babelify

Browserifyの項目を参照 https://github.com/hysryt/wiki/issues/13#issuecomment-342782771

hysryt commented 4 years ago

@babel/preset-env

https://babeljs.io/docs/en/babel-preset-env

ブラウザを指定でき、必要最低限のトランスパイルのみ行うことができるプリセット。

hysryt commented 4 years ago

ジェネレータ関数、非同期関数の変換

ジェネレータ関数や非同期関数の変換には regenerator-transform を使用している。 吐き出されたコードは regenerator-runtime が必要となる。 Babel はバンドルしてくれないため、別途 regenerator-runtime を npm install して webpack や rollup などでバンドルする必要がある。

regenerator-transform とは

ジェネレータ関数や非同期関数をES5に変換するための処理のモジュール Babel用プラグインとして作られている？

@babel/plugin-transform-regenerator

https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-regenerator Babelにジェネレータ関数や非同期関数の変換機能を付け加えるプラグイン。 中身は regenerator-transform。

regenerator-runtime とは

regenerator-transformによって変換されたコードを動作させるためのランタイム（関数、オブジェクト群）。

regenerator とは

https://github.com/facebook/regenerator/tree/master/packages/regenerator-transform ジェネレータ関数や非同期関数を変換するソフトウェアで、内部でBabelを使用している。 regenerator-runtimeをバンドルするオプションもあるが、オプションでの明示的な指示が必要であり、ランタイムを含めるべきかどうかを自動で判定してくれる機能はない。 Babelの設定が必要ないので楽な面もある。

hysryt commented 4 years ago

Babelで変換する際なぜモジュールバンドラが必要となるのか？

変換するソースによっては別途モジュールが必要になるためである。 たとえばasync関数をES5に変換する場合、regeneratorのランタイムライブラリが必要になる。 ほかにもPromiseをES5に変換する場合、core-jsのポリフィルが必要となる。 これらを結合するためにモジュールバンドラが必要となる。

もしBabelの段階でモジュールをファイルに埋め込む場合、ファイルごとにランタイムやポリフィルが増えてしまう。 Babelの段階ではモジュールは組み込まず、モジュールバンドラーの段階で一つだけランタイムやポリフィルを結合することで無駄がなくなる

hysryt commented 4 years ago

設定ファイル

babel.config.js .browserslistrc

hysryt commented 4 years ago

テンプレート

https://github.com/hysryt/babel_project_template

hysryt commented 4 years ago

loose

プリセットやプラグインには loose オプションを持つものが存在する。 loose をオンにした場合、仕様よりも実行時の速度やコードの単純さを重視したコードに変換される。 仕様を重視したい場合は loose をオフにする。 基本的にはオンにしても問題はなさそう。

https://qiita.com/jkr_2255/items/b7024c4984b69787d9c9 （魚拓）

hysryt commented 4 years ago

preset-env

forceAllTransforms

デフォルトは false 。 true を設定した場合、target の値に関係なく常に変換を行う。 次は BABEL_ENV が production の時に常に変換を行う設定となる。

forceAllTransforms: api.env("production")