PhpStorm + Babel + Browserifyで自動トランスパイル

免責: あんまり各ツールの役割とか正しく理解できてるか保証ないし、無駄なことしてるかも。とりあえず使えりゃいいやってくらいで。

参考
- Babelを使おう - Qiita

2018/04/03 情報を最新のやり方に更新

目的

javascript開発において、新しい言語仕様を使いつつ、旧来のWebブラウザでも動くようにしたい。

javascriptは、2015年にECMA Script2015(ES6)という新しい言語仕様が策定され、そちらの方が書きやすい
だけど各種ブラウザは、新しい言語仕様をまだ全ては解釈できない
開発はES6で書き、それを昔ながらの書き方に変換(トランスパイル)して、ブラウザには変換後を読み込ませましょう
変換処理は、ファイルの更新を監視して自動で行わせましょう

…という過渡期の制約から生まれた手法。

ちなみに想定対象者は、

javascriptを使ったWebページを開発する。規模は個人レベル
流れの速いWeb開発ツールのトレンドは追ってられないため、あまり多くのツールに依存するのは情報を調べるコストから避けたいが、そこそこの便利ツールの恩恵は享受したい。バランス派。

前提環境

Windows
Node.js インストール済
- ※Node.jsは直接インストールせず、nodistを使うのが吉
npm 使用可能

全体の流れ

Node.js上で、Browserify(ファイル結合ツール)を実行主体とし、Babel(トランスパイラ)をプラグインとして動かし、javascriptの結合とトランスパイルをする。

また、圧縮と、console.log()の削除も同時に行う。

以上を、PhpStormのファイル監視機能を用いて、更新があるたびに自動で行うよう設定する。

もっとやりこむならgulpとかのタスクツールを使う選択肢もあるが、ちょっとそこまで行くと調べることが多くなりすぎるので、シンプルにこの構成で。

あと、最近はBrowserifyの代わりにwebpackが主流なんだぜーとか言うのも無視！（どうせ次に自分がWeb開発を必要とする時には、また別のツールが主流になってるんだ絶対）

Browserifyのインストール

ブラウザのjavascriptは外部ファイル読み込み機能であるrequireを解釈できない。つまり、1機能は1ファイルにまとめて書かねばならず、複数ファイルに分ける場合は変数をグローバル空間上で受け渡ししなければならない。だが、1ファイルが長大になると開発しにくい。

これを、requireを使ったスクリプトでも、あらかじめまとめて1つにしてやるのがBrowserify。

Node.jsのパッケージのインストール先は、グローバルと、プロジェクト毎のローカルの2つがある。

	グローバル	ローカル
メリット	コマンドラインツールのように、cmdから直接使えるようになる	同じパッケージでもプロジェクト毎に異なるバージョンで管理できる環境を別PCに再構築しやすい
デメリット	環境下の全てで同じバージョンを使うことになる環境を別PCに再構築する時、改めての個別の再インストールが必要	実行がやや面倒プロジェクトが多いと容量を食う

まぁ、今回の領域では、Browserifyくらいはグローバルにインストールしてもいいかな？

(グローバルにインストール)
> npm install -g browserify

(ローカルにインストール、package.jsonに登録)
> npm install --save-dev browserify

Babel関連のパッケージ・プリセットのインストール

パッケージ名	効果
babel-cli	Babel本体
babelify	BrowserifyにおけるBabelプラグイン。両者の仲を取り持つ
babel-preset-env	どのバージョンからどのバージョンに変換すべきか決定しやすくする
babel-preset-minify	変換結果を圧縮する (旧:babel-preset-babili)
babel-preset-stage-0	デフォルトで入ってない追加機能を使用可能に。お好みで
babel-plugin-transform-remove-console	スクリプト内の`console.log()`などを削除

Babelにはbabelというパッケージもあるが、cliツールの方が人気になったためbabel-cliに更新を一本化している？ため、babel-cliの方を選ぶ。

こちらはプロジェクトにインストール。

> npm install --save-dev babel-cli babelify babel-preset-minify babel-preset-env babel-plugin-transform-remove-console

.babelrcの記述

プリセットやプラグインをインストールしたはいいが、それを実行時に指定してやらないとBabelは使ってくれない。

コマンドラインで指定もできるけど、実行ごとにやるのは面倒だし、後のためにどの設定で実行したかは残しておきたい。.babelrcというファイルをプロジェクトのルートに作っておくと、設定を自動で読んでくれる。

json形式。多分、各プリセットのページに行けば指定方法が書いてあるので、そのまま列挙すればいいと思う（適当）

{
  "presets": [
    "env",
    "minify"
  ],
  "plugins": [
    "transform-remove-console"
  ]
}

File Watchersの設定

やっとPhpStormの話題。

PhpStorm の File Watchers でファイルを監視し、変更があると自動的にトランスパイルする。

実はNode.js自体にもファイル監視するパッケージはある。だが、せっかくPhpStorm使ってるなら、File Watchers を使った方が楽と思う。

jsの変換もcssの変換も、監視ツールの使い方を調べる必要なく、統一的な設定方法で使える
起動終了を意識せずともIDEと同期できる

設定方法

Setting→Tools→File Watchersから、右端の[+]アイコンで、Babelを選択。

Node.jsにパスが通っていれば、PhpStormは自動でBabelの実行ファイルの位置を検知して、よく使う設定を入力してくれる。

で、これをBrowserify用に書き換える。

欄名	値(一例)
Name	Babel から Browserify とかに変更(任意)
File type	ECMAScript 6
Scope	※後述
Program	babel.cmdのパスが自動入力されているが、同フォルダにあるbrowserify.cmdに変更
Arguments	`--transform babelify (変換元) -o (変換先)` (例) `--transform babelify $FileRelativePath$ -o js/$FileNameWithoutExtension$.min.js`
Output paths to refresh	変換先 (例) `js/$FileNameWithoutExtension$.min.js`
Working directory	.babelrcのあるとこ (例) $ContentRoot$

Argumentsで出力パスを指定する場合、出力先フォルダはあらかじめ無いとエラーになるので注意。

なお、Browserify を使わず Babel を直接用いる場合、カレントディレクトリに注意する必要がある。babelの場合のコマンドライン指定は

babel {path/to/file.es6} –out-dir {path/to/outdir}

などとなるが、es6が相対パスでサブディレクトリ内にある場合、実際に出力される場所は

./path/to/outdir/path/to/file.js になってしまう。

WorkingDirectory を path/to に移動すると上手くいく。.babelrc もそこに移すか、設定はコマンドラインで直接与えるかする。

Scope

Scopeは、File Watchersにおいて監視対象を詳細に設定できる機能。Scope入力欄の右の[…]を押すと新規作成・編集できる。

たとえば「es6フォルダ内の、拡張子が.es6のファイル」を対象としたければ、下のファイルツリーからes6フォルダを選んでIncludeする。

Patternに「file[(プロジェクト名)]:es6/*」などと入力されるので、拡張子を微修正して*.es6とすればよい。欄下に“Scope contains X of total XXX files”と、現在の条件で対象となるファイル数が表示されるので、正しく指定できているか確認し、OK。

確認

適当に監視対象となるファイルを編集してみる。

うまく出力されているか確認する。

目次