babelのセットアップ覚書
JavaScriptのモジュールシステムが全く理解できなくて困っていたのだが、ようやく友だちになれそうな程度にはわかるようになった。
React Nativeやるときにはimportとかexportを使うのに、Node.jsのときはrequireになるのが解せない。
JavaScriptやるのにこいつらは避けて通れないものなのに、そもそもモジュールの仕組みもわからなくて往生した。
歴史的経緯でそうなっているのはわかったけれども、これからJavaScriptやるならどっちかにまとめたいところ。
今からやるなら新しい構文のimportで統一したいが、Node.jsはimportはそのままでは理解してくれない。
そこでトランスパイルが必要になる。
で、トランスパイルが必要なのもわかったけれども、ではどうやって準備すればいいのかがわからなくてこれまたハマる。 このあたりのセットアップがよくわからなくてJavaScript敬遠していたのもある。
ようやくbabelのセットアップのやり方、意味がわかったので覚書として残しておく。 とりあえずこれでJavaScriptであれこれ気楽に試せるようになった。
Node.jsのインストールとかは割愛。
nodeとかnpmは使える状態での手順。
- `npm init`でnode moduleのセットアップ
- babelのインストール`npm i --save-dev @babel/core @babel/cli @babel/node @babel/preset-env`
- `.babelrc`の設定
- `npx babel-node xxx.js`でxxx.jsをbabelでトランスパイルした上でnodeで実行
https://babeljs.io/docs/usage/cli/#babel-node
babelのインストールはcore, cli, node, preset-envがあればとりあえずは足りた。
とりあえずnpm i -gは使わない。
babelのバージョンをプロジェクトごとに管理するかどうかはわからないけれども、グローバルにインストールしなくてもnpxを使えばちゃんと動かせるので問題ない。
@babel/coreなどの@babelの部分はscoped packageといって、別にアノテーションではなくnpmのユーザ名である。
npmの仕組み上パッケージ名が早いもの勝ちになってしまうので、例えば私がbabel-some-great-utilみたいな名前でパッケージを上げたりできてしまう。
紛らわしいし、使いたいパッケージ名が使えないなんて問題が起こるので、その対策として生まれた仕組み。
@babel/coreなどはbabelのバージョン7になる。
今回はとりあえず動けばいいので、.babelrcはこれだけで問題ない。
{
"presets": ["@babel/preset-env"]
}
本来なら動作環境に合わせて設定すべき。
https://babeljs.io/docs/usage/babelrc/
.babelrcではなくpackage.json内に"babel"ブロックを定義することでも代用できる。
この設定ならpackage.json内に書いても問題ない気もする。
スクリプトの実行はnpx babel-node xxx.jsで、トランスパイル→nodeで実行をひとまとめにできる。
さらにJSファイルを書き換えて都度コマンドを叩くのは面倒くさいので、変更を監視して自動的に再実行させる。
npm i --save-dev nodemonでnodemonをインストールする。
npx babel-node xxx.js→npx nodemon xxx.js --exec babel-nodeに置き換えて実行する。
これだけ。
毎回コマンドを打つのは面倒くさいので、package.jsonのscriptブロックを利用して簡略化する。
"scripts": {
"start": "nodemon xxx.js --exec babel-node"
},
startよりwatchの方が適切だろうか。とにかく、"start"の部分は自分で好きにすればいい。
こうしておくとnpm run startで記述したコマンドが実行される。
package.json内だとnpxコマンドは必要ない。