差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン前のリビジョン | 次のリビジョン両方とも次のリビジョン | ||
| software:intellij:phpstorm:file_watcher:babel [2018/04/03] – ikatakos | software:intellij:phpstorm:file_watcher:babel [2018/04/04] – ikatakos | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| ======PhpStorm + Babel + Browserifyで自動トランスパイル====== | ======PhpStorm + Babel + Browserifyで自動トランスパイル====== | ||
| - | 免責: | + | 免責: あんまり各ツールの役割とか正しく理解できてるか保証ないし、無駄なことしてるかも。とりあえず使えりゃいいやってくらいで。 |
| * 参考 | * 参考 | ||
| 行 10: | 行 10: | ||
| =====目的===== | =====目的===== | ||
| - | javascript開発において、新しい言語使用を使いつつ、旧来のWebブラウザでも動くようにする。 | + | javascript開発において、新しい言語仕様を使いつつ、旧来のWebブラウザでも動くようにしたい。 |
| - | * Webサイト用のjavascriptを開発するとき、新しい言語仕様（ES2015/ | + | * javascriptは、2015年にECMA Script2015(ES6)という新しい言語仕様が策定され、そちらの方が書きやすい |
| - | * だけど、各種ブラウザは、新しい言語使用をまだ全ては解釈できない: | + | * だけど各種ブラウザは、新しい言語仕様をまだ全ては解釈できない: |
| - | * ES6で書いたものを昔ながらの書き方に変換(トランスパイル)して、ブラウザには変換後を読み込ませましょう | + | * 開発はES6で書き、それを昔ながらの書き方に変換(トランスパイル)して、ブラウザには変換後を読み込ませましょう |
| * 変換処理は、ファイルの更新を監視して自動で行わせましょう | * 変換処理は、ファイルの更新を監視して自動で行わせましょう | ||
| - | …という過渡期特有の面倒くさい制約から生まれた手法。 | + | …という過渡期の制約から生まれた手法。 |
| ちなみに想定対象者は、 | ちなみに想定対象者は、 | ||
| - | * javascriptを使ったWebページを開発する。規模は個人とか数人レベル | + | * javascriptを使ったWebページを開発する。規模は個人レベル |
| - | * Web開発専門職というわけでなく、流れの速いWeb開発ツールのトレンドは追ってられないため、あまり多くのツールに依存するのは情報を調べるコストから避けたいが、そこそこの便利ツールの恩恵は享受したい。バランス派。 | + | * 流れの速いWeb開発ツールのトレンドは追ってられないため、あまり多くのツールに依存するのは情報を調べるコストから避けたいが、そこそこの便利ツールの恩恵は享受したい。バランス派。 |
| =====前提環境===== | =====前提環境===== | ||
| 行 33: | 行 33: | ||
| =====全体の流れ===== | =====全体の流れ===== | ||
| - | Browserify(ファイル結合ツール)を実行主体とし、Babel(トランスパイラ)をプラグインとして実行する。 | + | Node.js上で、Browserify(ファイル結合ツール)を実行主体とし、Babel(トランスパイラ)をプラグインとして実行する。 |
| また、圧縮と、デバッグ用のconsole.log()の削除も同時に行う。 | また、圧縮と、デバッグ用のconsole.log()の削除も同時に行う。 | ||
| 行 39: | 行 39: | ||
| もっとやりこむならgulpとかのタスクツールを使う選択肢もあるが、ちょっとそこまで行くと調べることが多くなりすぎるので、シンプルにこの構成で。 | もっとやりこむならgulpとかのタスクツールを使う選択肢もあるが、ちょっとそこまで行くと調べることが多くなりすぎるので、シンプルにこの構成で。 | ||
| + | |||
| + | あと、最近はBrowserifyの代わりにwebpackが主流なんだぜーとか言うのも無視！（どうせ次に自分がWeb開発を必要とする時には、また別のツールが主流になってるんだ絶対） | ||
| =====Browserifyのインストール===== | =====Browserifyのインストール===== | ||
| - | ブラウザのjavascriptは外部ファイル読み込み機能であるimportやrequireを解釈できない。これをあらかじめまとめて1つにしてやるのがBrowserify。 | + | ブラウザのjavascriptは外部ファイル読み込み機能であるrequireを解釈できない。つまり、1機能は1ファイルにまとめて書かねばならず、複数ファイルに分ける場合は変数をグローバル空間上で受け渡ししなければならない。だが、1ファイルが長大になると開発しにくい。 |
| - | '' | + | これを、requireを使ったスクリプトでも、あらかじめまとめて1つにしてやるのがBrowserify。 |
| 行 86: | 行 88: | ||
| =====.babelrcの記述===== | =====.babelrcの記述===== | ||
| - | パッケージをインストールしたはいいが、それを実行時に指定してやらないとBabelは使ってくれない。 | + | プリセットやプラグインをインストールしたはいいが、それを実行時に指定してやらないとBabelは使ってくれない。 |
| - | 実行毎にコマンドラインで指定もできるけど、面倒だし、後に残らないと忘れちゃう。'' | + | コマンドラインで指定もできるけど、実行ごとにやるのは面倒だし、後のためにどの設定で実行したかは残しておきたい。'' |
| json形式。多分、各プリセットのページに行けば指定方法が書いてあるので、そのまま列挙すればいいと思う（適当） | json形式。多分、各プリセットのページに行けば指定方法が書いてあるので、そのまま列挙すればいいと思う（適当） | ||
| 行 112: | 行 114: | ||
| 実はNode.js自体にもファイル監視するパッケージはある。だが、せっかくPhpStorm使ってるなら、File Watchers を使った方が楽と思う。 | 実はNode.js自体にもファイル監視するパッケージはある。だが、せっかくPhpStorm使ってるなら、File Watchers を使った方が楽と思う。 | ||
| - | * jsの変換もcssの変換も、設定が統一的な方法で使える | + | * jsの変換もcssの変換も、監視ツールの使い方を調べる必要なく、統一的な設定方法で使える |
| - | * 起動終了がIDEと同期できる | + | * 起動終了を意識せずともIDEと同期できる |
| ====設定方法==== | ====設定方法==== | ||
