JavaScript の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。
ほとんどの場合、圧縮は、webpack(英語) などのビルドツールを使用して、ビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、UglifyJS(英語) などのスタンドアロンツールを使用できます。
コードを自動的に圧縮するには、ファイルへの変更を追跡して UglifyJS を実行する UglifyJS ファイルウォッチャーを構成する必要があります。
デフォルトでは、ファイル監視のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに縮小が開始されます。UglifyJS を呼び出す他のイベントを指定できます。ファイル監視の詳細を参照してください。
生成された縮小コードは、ソース JavaScript ファイルの名前と拡張子 min.js が付いた別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。ただし、プロジェクトツリーでは、縮小されたコードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。このデフォルトの表示を変更するには、プロジェクトツールウィンドウでファイルのネストを設定します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページでファイル監視プラグインをインストールして有効にします。
UglifyJS をグローバルにインストールする
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install --g uglify-jsUglifyJS 公式サイト(英語)の詳細を参照してください。
UglifyJS File Watcher を作成する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、ツールのファイル監視をクリックします。開くファイルウォッチャーページには、すでに構成されているファイル監視のリストが表示されます。
をクリックするか、Alt+Insert を押して、リストから UglifyJS 定義済みテンプレートを選択します。
新規ウォッチャーダイアログが開きます。
プログラムテキストボックスで、UglifyJS 実行可能ファイルの場所を指定します。
Node パッケージマネージャーを介して UglifyJS をインストールした場合、IntelliJ IDEA はパッケージ自体を検索し、フィールドに
uglifyjsエイリアスを自動的に入力します。それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。ファイル監視に従って、デフォルトのファイル監視設定を受け入れるか、必要に応じて再構成し、OK をクリックします。IntelliJ IDEA を実行すると、ファイル監視ページに戻り、新しいファイル監視がリストに追加されます。
「有効」チェックボックスが選択されていることを確認します。
デフォルトでは、ファイル監視は現在のプロジェクトで使用できます。他のプロジェクトで使用するには、レベルリストからグローバルを選択します。
関連ページ：
ファイル監視
ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...
新規ウォッチャーダイアログ
ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み IntelliJ IDEA File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィールドに、ファイル監視の名前を入力します。デフォ...
ファイルのネストダイアログ
このダイアログは、プロジェクトツールウィンドウのタイトルバーのコンテキストメニューでファイルのネストをクリックすると開きます。このダイアログを使用して、同じ名前で異なる接尾辞を持つファイルの表示を設定します。このようなファイルの束は、たとえば Angular を使用する場合など、フレームワーク固有のプロジェクトに表示される場合があります。また、生成されたソースマップを使用して TypeScript を JavaScript にコンパイルすることも検討してください。IntelliJ IDEA は、その...
プラグインを管理する
このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...
モジュールの依存関係図
IntelliJ IDEA を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でのインポートとエクスポートの視覚化を行うことができます。undefined モジュール依存関係図の作成：JavaScript、TypeScript、または HTML ファイルのコンテキストメニューから、またはフォルダーのコンテキストメニューからを選択します。node_modules およびフォルダーでは、この操作は使用できません。複数の型のダイアグラムを作成できるフォルダーで...