JavaScript の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。
ほとんどの場合、圧縮は、webpack(英語) などのビルドツールを使用して、ビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、UglifyJS(英語) などのスタンドアロンツールを使用できます。
コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行するファイル監視を構成する必要があります。
デフォルトでは、ファイルウォッチャーのスコープ内の JavaScript ファイルが変更され保存されるとすぐに縮小化が開始されます。ツールを呼び出す他のイベントを指定できます。詳細については、ファイル監視を参照してください。
生成された縮小コードは、ソース Javascript ファイルの名前と拡張子 min.js を持つ別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されます。ただし、プロジェクトツリーでは、縮小されたコードを含むファイルは、ノードとして表示されるソース Javascript ファイルに表示されます。このデフォルトのプレゼンテーションを変更するには、プロジェクトツールウィンドウでファイルのネストを構成します。
以下の例は、UglifyJS を使用して JetBrains Rider から直接 JavaScript コードを縮小する方法を示しています。
サンプル: UglifyJS を使用して JavaScript を圧縮する
コードを自動的に圧縮するには、UglifyJS をインストールし、ファイルへの変更を追跡してツールを実行する UglifyJS ファイルウォッチャーを構成する必要があります。
デフォルトでは、ファイル監視のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに縮小が開始されます。UglifyJS を呼び出す他のイベントを指定できます。ファイル監視の詳細を参照してください。
生成された縮小コードは、ソース JavaScript ファイルの名前と拡張子 min.js が付いた別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。ただし、プロジェクトツリーでは、縮小されたコードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。このデフォルトの表示を変更するには、プロジェクトツールウィンドウでファイルのネストを設定します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
設定でファイル監視バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドにファイル監視と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
UglifyJS をグローバルにインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --g uglify-jsUglifyJS 公式サイト(英語)の詳細を参照してください。
UglifyJS File Watcher を作成する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、ツールのファイル監視をクリックします。開くファイルウォッチャーページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押して、リストから UglifyJS 定義済みテンプレートを選択します。
新規ウォッチャーダイアログが開きます。
プログラムフィールドに、UglifyJS 実行可能ファイルの場所を指定します。
Node パッケージマネージャーを介して UglifyJS をインストールした場合、JetBrains Rider はパッケージ自体を検索し、フィールドに
uglifyjsエイリアスを自動的に入力します。それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。デフォルトでは、スコープフィールドにはプロジェクトファイルが表示されます。すでに縮小されたファイルの縮小を回避するには、新しいスコープを定義するに従って、
file:*js&&!file:*.min.*パターンを使用してカスタムスコープを構成します。次に、スコープリストから新しいスコープを選択します。
他のデフォルトのファイル監視設定を受け入れるか、必要に応じてファイル監視の説明に従って再構成し、「OK」をクリックします。JetBrains Rider を実行すると、ファイル監視ページに戻り、新しいファイル監視がリストに追加されます。
「有効」チェックボックスが選択されていることを確認します。
デフォルトでは、ファイル監視は現在のプロジェクトで使用できます。他のプロジェクトで使用するには、レベルリストからグローバルを選択します。
関連ページ：
ファイル監視
ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する JetBrains Rider システムです。JetBrains Rider は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供するカスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用...
新規ウォッチャーダイアログ
ファイルウォッチャーページの追加 または編集 ボタンをクリックすると、ダイアログが開きます。このダイアログを使用して、定義済みの JetBrains Rider ファイルウォッチャーテンプレートに基づいてプロジェクトファイルウォッチャーを作成したり、既存のプロジェクトファイルウォッチャーを編集したりできます。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィー...
ファイルのネスト規則
JetBrains Rider は、関連するファイルタイプに使用されるファイルタイプと一般的なサフィックスのデフォルト構成を提供します。たとえば、.map.ts サフィックスを持つファイルは通常、同じ名前と .ts 拡張子を持つファイルに関連しています。このようなファイルは自動的にグループ化されます。ソリューションエクスプローラー。ソリューションエクスプローラーのツールバーでクリックし、ファイルのネスト設定 ... を選択すると、これらの関係を構成したり、論理ネストを完全に無効にしたりできます。この方...
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
スコープとファイルの色
スコープは、ソリューション内のファイルとフォルダーのグループです。スコープを使用して、さまざまな IDE ビューでソリューション項目を視覚的に区別し、特定の操作の範囲を制限できます。スコープは、ソリューション内のファイルを論理的に整理するように設計されています。テストソースはテスト関連のスコープに移動でき、製品コードは製品ファイルのスコープに関連付けることができます。これらの論理チャンクにより、ソリューションの管理が容易になります。JetBrains Rider には一連の定義済みスコープが付属...
Prettier
Prettier は、TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。JetBrains Rider では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。JetBrains Rider は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追...