差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
| software:intellij:phpstorm:file_watcher:babel [2018/04/04] – ikatakos | software:intellij:phpstorm:file_watcher:babel [2018/04/04] – [テーブル] ikatakos | ||
|---|---|---|---|
| 行 33: | 行 33: | ||
| =====全体の流れ===== | =====全体の流れ===== | ||
| - | Node.js上で、Browserify(ファイル結合ツール)を実行主体とし、Babel(トランスパイラ)をプラグインとして実行する。 | + | Node.js上で、Browserify(ファイル結合ツール)を実行主体とし、Babel(トランスパイラ)をプラグインとして動かし、javascriptの結合とトランスパイルをする。 |
| - | また、圧縮と、デバッグ用のconsole.log()の削除も同時に行う。 | + | また、圧縮と、console.log()の削除も同時に行う。 |
| + | 以上を、PhpStormのファイル監視機能を用いて、更新があるたびに自動で行うよう設定する。 | ||
| + | <WRAP center round box> | ||
| もっとやりこむならgulpとかのタスクツールを使う選択肢もあるが、ちょっとそこまで行くと調べることが多くなりすぎるので、シンプルにこの構成で。 | もっとやりこむならgulpとかのタスクツールを使う選択肢もあるが、ちょっとそこまで行くと調べることが多くなりすぎるので、シンプルにこの構成で。 | ||
| あと、最近はBrowserifyの代わりにwebpackが主流なんだぜーとか言うのも無視！（どうせ次に自分がWeb開発を必要とする時には、また別のツールが主流になってるんだ絶対） | あと、最近はBrowserifyの代わりにwebpackが主流なんだぜーとか言うのも無視！（どうせ次に自分がWeb開発を必要とする時には、また別のツールが主流になってるんだ絶対） | ||
| + | </ | ||
| =====Browserifyのインストール===== | =====Browserifyのインストール===== | ||
| 行 53: | 行 55: | ||
| Node.jsのパッケージのインストール先は、グローバルと、プロジェクト毎のローカルの2つがある。 | Node.jsのパッケージのインストール先は、グローバルと、プロジェクト毎のローカルの2つがある。 | ||
| - | ^ ^グローバル^ローカル^ | + | ^ ^ グローバル |
| - | |メリット|コマンドラインツールのように、cmdから直接使えるようになる|同じパッケージでもプロジェクト毎に異なるバージョンで管理できる \\ 環境を別PCに再構築しやすい| | + | | メリット |
| - | |デメリット|全環境で同じバージョンを使うことになる \\ 環境を別PCに再構築する時、改めての再インストールが必要|実行がやや面倒 \\ プロジェクトが多いと容量を食う| | + | | デメリット |
| * [[https:// | * [[https:// | ||
