web-dev-qa-db-ja.com

NPMを使用してVisual Studio 2017内にパッケージをインストールする方法

ASP.NET Core v2を実行し、Reactアプリを構築する簡単なVisual Studioソリューションがあります。

次に、NPMを使用して単純なコンポーネントをインストールします。この特定の例では、次のようになります。

npm install --save react-bootstrap-typeahead

このパッケージを自分のソリューションでのみ機能させ、他のどこでも機能させないようにします。

私の結果:

これを実行すると、次のニースエラーが表示されます。 NPMが'C:\Users\LarsHoldgaard\package.json'でプロジェクトファイルを見つけることができると信じている場合、それは運が悪いです。正しいパスはC:\Users\LarsHoldgaard\Documents\Github\Likvido.CreditRisk\Likvido.CreditRisk\Likvido.CreditRiskです。

npm : npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'
At line:1 char:1
+ npm install --save react-bootstrap-typeahead
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (npm WARN saveEr...d\package.json':String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError

npm

WARN

enoent
 ENOENT: no such file or directory, open 'C:\Users\LarsHoldgaard\package.json'

npm

WARN
 [email protected] requires a peer of grunt@>=0.4.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@>=0.13.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@^0.14.0 || ^15.2.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@>=0.14.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@^0.14.9 || >=15.3.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@^15.5.x || ^16.x but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react@>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 [email protected] requires a peer of react-dom@>=15.0.0 but none is installed. You must install peer dependencies yourself.

npm

WARN
 LarsHoldgaard No description

npm

WARN
 LarsHoldgaard No repository field.

npm

WARN
 LarsHoldgaard No README data

npm

WARN
 LarsHoldgaard No license field.

私の考え:

コンソールnoobであるため、現在のフォルダーを変更する必要があると思います。しかし、dirを実行すると、適切なフォルダーに移動し、package.jsonを他のファイルと一緒に見ることができます。

コンポーネントをインストールする正しい方法は何ですか?

13
Lars Holdgaard

正しいディレクトリに手動で移動しないようにするには、Mads Kristensenの「Open Command Line」拡張機能を使用します。 Marketplaceで無料で入手できます。あなたはそれを見つける ここ

インストールしたら、Visual Studio内から直接コマンドプロンプトを開くことができます。

enter image description here

ヒント:コマンドプロンプトを開くには、コンテキストメニューの代わりにキーボードショートカットAlt +スペースを使用します。

その後、npmコマンドを実行できます。

npm install react-bootstrap-typeahead

追記:npm 5.0.0以降、インストールされたモジュールはデフォルトで依存関係として追加されるため、-saveオプションは不要になりました。

2019年更新

Developer Command PromptとDeveloper Power ShellがVisual Studio 2019(16.2プレビュー2)に統合されました-拡張機能はもう必要ありません。

それらはTools/Command Lineの下にあります

デフォルトでは、ショートカットは割り当てられていません-あなたはこれを自分でしなければなりません。

enter image description here

13
Postlagerkarte

Visual Studioが提供するUIを簡単に使用するのが最も簡単な方法だと思います。

プロジェクトのルートにpackage.jsonを作成します(Todoの場合、プロジェクトを右クリックしてアイテムを追加し、NPMを検索します。npm Configuration Fileが見つかります):

{
  "name": "SomeName",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "react-bootstrap-typeahead": "*"
  }
}

*は最新バージョン用です。これは推奨されません。必要なバージョンを指定することをお勧めします。バージョンとパッケージ名のインテリジェンスのサポートがあることに気付くでしょう。

Jsonファイルに変更を加えるたびに、単純なプレス CTRL + S。 Visual Studioは自動的にNPMを呼び出し、パッケージを復元します。

コマンドラインの使用方法については、他の回答者が既に回答しています。しかし、私はコマンドライン初心者なので、この方法を好みます。

16

Package Managerコンソールを使用して、npmコマンドを実行できます。

パッケージマネージャーコンソールを開くには、[ツール]> [Nugetパッケージマネージャー]に移動し、[パッケージマネージャーコンソール]を選択して、npmコマンドを入力します。

enter image description here

enter image description here

2
Yew Hong Tat
  • Windowのエクスプローラーで、プロジェクトのpackage.jsonファイルがある場所に移動します。
  • node_modulesファイルと同じディレクトリにpackage.jsonという名前のフォルダーを作成します
  • 左の[Shift]キーを押しながら、project.jsonファイルを含むフォルダーを右クリックします。
  • コンテキストメニューから[ここでコマンドウィンドウを開く]を選択します。
  • Npmコマンドを入力しますnpm install --save react-bootstrap-typeahead
1
AperioOculus