私は約1年前に.Net Coreアプリケーションの開発を始めました。 .Net Coreを使用してVisual Studioでプロジェクトをセットアップし、Bowerを使用してクライアント側のパッケージを管理しました。 bower
は メンテナンス中/廃止 のようで、「担当者」は代わりにyarn
またはwebpack
を使用することを提案しています。
だから私の質問は、どのようにyarn
の代わりにbower
を使い始めるのですか? (または、より適切な場合はnpm)
プロジェクトを開始したとき、次のように入力するだけでVisual Studioパッケージマネージャー内からbowerを使用しました。
bower install <package-name>
そして、wwwroot/lib/
フォルダ内にファイル/ディレクトリをインストールすることができました。私は_Layout.cshtml
に依存関係を追加するだけで、すべてが問題なく機能しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
Yarnまたはnpmを使用してVisual Studio 2017内で同じ「簡単さ」を達成する方法を見つけるのは非常に難しいと感じています。BundlerMinifier.Core
NuGetパッケージを介してファイルをミニファイするためのアクセス権があり、 my内のファイルの場合、これは使用するソリューションの要件ではありません。
私はグーグルで試しましたが、これはあまり一般的な問題ではないようです。そして、私が見つけたすべてのリンクは、npmを使用してwwwroot/lib/
にファイルを移動するためにgulpをセットアップすることを提案しました。
yarn
を使用して、bower
で行ったのと同様のパッケージをインストールする方法を教えてください。または、代わりにnpm
を使用する必要がありますか?
私はあなたと同じ質問をしましたが、Yarnを使うのはそれほど難しくないことがわかりました。ここでは、Yarnのインストール、Visual Studio 17の調整、およびプロジェクトワークフローについて説明します。
糸の設置
Yarnを実行するには、2つのものをインストールする必要があります。
Visual Studio 2017でNPMを無効にする
Yarnはプロジェクト内のファイルpackage.jsonを使用して、インストールしたものを追跡します。 NPMも同じファイルを使用します。競合を避けるために、Visual StudioでNPMフックを無効にしました。有効にすると、これらのフックによりpackage.jsonが変更されるたびにNPMがパッケージをロードします。
NPMを無効にするには、ツールメニューに移動し、オプション...を選択します。左側のツリーで、プロジェクトとソリューション-> Webパッケージ管理-> パッケージの復元に移動します。右側で、両方のオプションをFalseに変更して、NPMフックを無効にします。
上の画像では、Bowerのフックも無効にしています。これはオプションです-誤ってBowerにパッケージをインストールさせないようにしました。
糸のプロジェクト設定
Yarnをプロジェクトで使用するには、いくつかのことを行う必要があります。
{
}
次のディレクトリ構造は、これら2つのことを備えたサンプルプロジェクトを示しています。
+ Solution
+ Project
+ wwwroot
+ lib
+ Program.cs
+ Startup.cs
+ package.json
糸の使用法/プロジェクトのワークフロー
ここにあなたが待っていた部分があります。まず、パッケージマネージャーコンソールを開きます。コンソールは、VS内の単なるPowerShellコンソールです。開くと、ソリューションディレクトリに移動するため、プロジェクトディレクトリにCDを挿入する必要があります。その後、Yarnを使用してライブラリを追加できます。
cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib [email protected]
パッケージはwwwroot\libにインストールされるようになりました。Yarnにパッケージをインストールするよう指示しているからです。
Visual Studio 2017での糸のショートカットの追加
前のセクションで入力が多すぎると思われる場合は、VSにショートカットを追加して物事を単純化できます。これを設定すると、ターゲットフォルダーを指定して、Yarnがプロジェクトディレクトリから自動的に実行されます。必要なことは、インストールするパッケージを指定することだけです。
Visual Studio内で、メニューからツール> 外部ツール...をクリックします。ポップアップでAddボタンをクリックし、次のようにフィールドに入力します。
これらのチェックボックスも有効にします。
[〜#〜] ok [〜#〜]ボタンをクリックして、ショートカットを保存します。
これで、ツールメニューの下に糸の追加アイテムがあるはずです。それをクリックすると、入力引数を求めるポップアップが表示されます:
必要なのは、最初の編集ボックスをクリックしてパッケージを追加するだけです。たとえば、jqueryを追加するには:
ポップアップで[OK]をクリックすると、Yarnが魔法をかけてパッケージをインストールするはずです。
その他の考慮事項
糸とnpmはまったく同じものです。 yarnまたはnpmを使用して、まったく同じ目標を達成し、ノードパッケージをインストールできます。これは、bowerがnode_modulesの代わりにプロジェクトWebアセットに追加したことを除いて、bowerが以前に行ったことと似ています。
WebPackは、純粋にクライアント側のWebアセットを構築し、それらを依存関係にバンドルするためのツールです。
これが必要ない場合は、従来のプロジェクトに引き続きbowerまたはNugetを使用してください。新しいプロジェクトの場合は、WebPackとyarn/npmを使用します。
私の意見では、簡単なオプションはyarnを使用し、rcファイルを使用してパッケージをインストールするフォルダーを指定することです。方法は次のとおりです。
1) yarnのサイト からコンピューターに糸をダウンロードします。Windowsを使用している場合は、コンピューターのパスに含まれていることを確認する必要があります。
2)package.jsonを作成するか、コマンドラインからプロジェクトのルートに「yarn init」と入力します(「yarn init」と入力すると、パッケージのフォーマットに役立つ情報がいくつか要求されます) .jsonファイル)。 package.jsonファイルのengineセクションで、どの糸エンジンが指定されているかに注目してください。
{
"version": "1.0.0",
"dependencies": {
"bootstrap": "4.1.3",
"popper.js": "1.14.3",
},
"engines": {
"yarn": ">= 1.0.0"
}
}
次に、Visual Studio内の新しいテキストファイルをプロジェクトに追加して.yarnrcファイルを作成します。ファイルのフルネームは ".yarnrc" no .txtである必要があります。プロジェクトはパッケージの下に.yarnrcファイルを自動的に追加します。 json、rcファイルに次を追加します。
--modules-folder wwwroot/lib
引用符は必要ありません。
次に、プロジェクトのルートフォルダーでコマンドラインを開き、「yarn」と入力すると、すべてのパッケージが.yarnrcファイルで指定されたフォルダーにインストールされます。