差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
software:intellij:phpstorm:file_watcher:babel [2018/04/04] – ikatakos | software:intellij:phpstorm:file_watcher:babel [2019/04/11] (現在) – [設定方法] 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:// | ||
行 130: | 行 132: | ||
|Scope|※後述| | |Scope|※後述| | ||
|Program|babel.cmdのパスが自動入力されているが、同フォルダにあるbrowserify.cmdに変更| | |Program|babel.cmdのパスが自動入力されているが、同フォルダにあるbrowserify.cmdに変更| | ||
- | |Arguments|'' | + | |Arguments|'' |
|Output paths to refresh|変換先 \\ (例) \\ '' | |Output paths to refresh|変換先 \\ (例) \\ '' | ||
|Working directory|.babelrcのあるとこ \\ (例) \\ '' | |Working directory|.babelrcのあるとこ \\ (例) \\ '' | ||
- | |||
Argumentsで出力パスを指定する場合、出力先フォルダはあらかじめ無いとエラーになるので注意。 | Argumentsで出力パスを指定する場合、出力先フォルダはあらかじめ無いとエラーになるので注意。 | ||
+ | |||
+ | <note 90%> | ||
+ | なお、Browserify を使わず Babel を直接用いる場合、カレントディレクトリに注意する必要がある。babelの場合のコマンドライン指定は | ||
+ | |||
+ | '' | ||
+ | |||
+ | などとなるが、es6が相対パスでサブディレクトリ内にある場合、実際に出力される場所は | ||
+ | |||
+ | '' | ||
+ | |||
+ | WorkingDirectory を '' | ||
+ | </ | ||
===Scope=== | ===Scope=== |