目次
PhpStorm + Babel + Browserifyで自動トランスパイル
免責: あんまり各ツールの役割とか正しく理解できてるか保証ないし、無駄なことしてるかも。とりあえず使えりゃいいやってくらいで。
- 参考
目的
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で出力パスを指定する場合、出力先フォルダはあらかじめ無いとエラーになるので注意。
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。
確認
適当に監視対象となるファイルを編集してみる。
うまく出力されているか確認する。
