Webpack
PyCharm は webpack(英語) モジュールバンドラーと統合されています。このサポートは、webpack モジュールの解決とエイリアスの解決(英語)を考慮に入れることにより、JavaScript ファイルのコーディング支援を改善します。
異なる webpack 構成を持つ複数のモジュールで構成されるプロジェクトでは、PyCharm は各モジュールに関連する構成ファイルを自動的に検出し、そこからモジュール解決ルールを使用できます。以下の使用する webpack 構成ファイルの指定を参照してください。
webpack バージョン 2 以降の場合、PyCharm は、コード補完と、webpack 構成ファイルのオプションのクイックドキュメントルックアップを提供します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Webpack に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
PyCharm での webpack の構成
package.json に webpack を追加する
webpack が package.json の
dependenciesまたはdevDependenciesオブジェクトにリストされていることを確認してください。webpack が見つからない場合は、内蔵ターミナル（Alt+F12）を開き、次のように入力します。
npm install --save-dev webpack
webpack 構成ファイルを作成する
プロジェクト構造に応じて 1 つまたは複数の構成ファイルを作成します。プロジェクトツールウィンドウ Alt+1 で親フォルダーを選択し、コンテキストメニューからを選択します。詳細については、webpack 公式 Web サイト(英語)を参照してください。
使用する webpack 構成ファイルを指定する
webpack 構成ファイルの分析に基づいて、PyCharm は webpack 構成を理解し、モジュールを解決し、JavaScript ファイルでコーディング支援を提供します。以下のモジュールの解決を参照してください。
PyCharm では、自動と手動の 2 つの構成モードから選択できます。
自動構成を使用すると、PyCharm は各 JavaScript ファイルに関連する webpack 構成ファイルを自動検出します。
手動構成では、プロジェクトで使用する webpack 構成ファイルを指定します。webpack 構成ファイルの名前が PyCharm で認識されない場合は、手動構成が便利です。以下の認識される webpack 構成名のリストを参照してください。
webpack 構成を検出する方法を選択する
設定ダイアログ（Ctrl+Alt+S）を開き、 に移動します。
モジュール解決のための Webpack 構成ファイルの検出領域で、次のいずれかのオプションを選択します。
自動 : このモードでは、JavaScript ファイルの場合、PyCharm は最初にこの JavaScript ファイルが配置されているフォルダーで webpack 構成ファイルを検索し、次にその親フォルダーで検索します。
その結果、プロジェクトが異なる webpack 構成の複数のモジュールで構成されている場合、各モジュールは独自の webpack 構成ファイルのモジュール解決ルールを使用します（そのような構成が見つかった場合）。
PyCharm は、JavaScript または TypeScript webpack 構成ファイルを、次の名前で次の順序で認識します。
webpack.config.js / webpack.config.ts
webpack.base.conf.js / webpack.base.conf.ts
webpack.dev.conf.js / webpack.dev.conf.ts
webpack.prod.conf.js / webpack.prod.conf.ts
webpack.base.config.js / webpack.base.config.ts
webpack.dev.config.js / webpack.dev.config.ts
webpack.prod.config.js / webpack.prod.config.ts
webpack.babel.js / webpack.babel.ts
手動 : 構成ファイルフィールドで、使用する webpack 構成の場所を指定します。
このモードでは、指定された構成ファイルの解決ルールがプロジェクト内のすべてのモジュールに適用されます。
webpack 構成ファイルの名前が PyCharm で認識されない場合は、このオプションを選択します。上記の認識される webpack 構成名のリストを参照してください。
webpack 公式 Web サイトのオンラインドキュメント(英語)も参照してください。
webpack 構成ファイルの編集
webpack バージョン 2 以降の場合、PyCharm は、webpack 構成ファイルの構成オブジェクトでコード補完およびドキュメントのルックアップを提供します。コード補完はオンザフライで提供されます。シンボルのドキュメントを表示するには、Ctrl+Q を押します。
モジュールの解決
プロジェクトを開くか、webpack 構成ファイル ( 自動検出または設定 | 言語 & フレームワーク | JavaScript | Webpack で指定されたファイル) を編集すると、PyCharm はバックグラウンドで構成を分析し、受信した情報に基づいて、プロジェクトのルート解決(英語)とエイリアスの解決(英語)を適切に理解します。プロジェクト構成のこの理解のおかげで、PyCharm は JavaScript ファイルのインポートおよびエクスポートされたシンボルに対してより正確なコード補完を提供します。その結果、何もしなくてもすべてが正常に機能します。
下の図は、react-color がパス './src/index.js' のエイリアスであるプロジェクトでのモジュール解決を示しています。PyCharm は react-color からのインポートを正しく解決し、それへのナビゲーションとエクスポートされたシンボルの補完を提供します。
webpack を使用するアプリケーションのデバッグ
webpack を使用するアプリケーションは、JavaScript クライアント側アプリケーションをデバッグするのと同じ方法でデバッグできます。Create React App で作成した React アプリケーションのデバッグ(英語)および Angular CLI で作成された Angular アプリケーションのデバッグ(英語)を参照してください。
関連ページ：
プラグインのインストール
プラグインは PyCharm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケット...
Vite
PyCharm は、フロントエンド開発エクスペリエンスを向上させる Vite ビルドツールと統合されています。Vite は、開発サーバーとビルドコマンドで構成されます。ビルドサーバーは、ネイティブ ES モジュールを介してソースファイルを提供します。build コマンドはコードを Rollup にバンドルします。Rollup は、本番用に高度に最適化された静的アセットを出力するように事前構成されています。PyCharm は、Vue タグで tsconfig.json および jsconfig.json パスマ...
JSON
JSON 形式は、データの保存や構成ファイルの保存によく使用されます。PyCharm は JSON ファイルの操作に役立ち、構文とフォーマットをチェックします。一般的な種類の構成ファイルでは、PyCharm がコードを検証し、そのようなファイルの構造と内容を記述するための特別な形式である JSON スキーマに基づいてコード補完を提供します。PyCharm には、最も一般的な形式の登録済みスキーマセットがバンドルされています。JSON Schema Store のスキーマやカスタム JSON スキーマ...