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で実行勉強のためにES6で書いたJavaScriptをとりあえずnodeで動かして動作確認できるようにするだけの目的での話。実際にプロダクトとして動かす場合は`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を使う毎回コマンドを打つのは面倒くさいので、package.jsonのscriptブロックを利用して簡略化する。 "scripts": { "start": "nodemon xxx.js --exec babel-node" }, startよりwatchの方が適切だろうか。とにかく、"start"の部分は自分で好きにすればいい。こうしておくとnpm run startで記述したコマンドが実行される。 package.json内だとnpxコマンドは必要ない。

JavaScript再入門中

JavaScriptはやろうかなと手を出した時期があったのだが、そのときは挫折した。挫折したというか、優先度の問題から深入りするのを止めたというのが正しい。

当時はAndroidのコーディングすらまともにできていないのに、JavaScriptに手を出すのは無謀ではないかと言い訳をしていた記憶がある。

Read full post