目次

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

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

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

目的

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

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

ちなみに想定対象者は、

前提環境

全体の流れ

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-cliBabel本体
babelifyBrowserifyにおける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 を使った方が楽と思う。

設定方法

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

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

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

欄名値(一例)
NameBabel から Browserify とかに変更(任意)
File typeECMAScript 6
Scope※後述
Programbabel.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。

確認

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

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