web-dev-qa-db-ja.com

Bowerから離れて（廃止）代わりにYarn / Npmを使用する（.Net Core MVC）VS2017

私は約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を使用する必要がありますか？

npmasp.net-core-mvcvisual-studio-2017boweryarnpkg
42
Zeliax

私はあなたと同じ質問をしましたが、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フックを無効にします。

Disable NPM in Visual Studio

上の画像では、Bowerのフックも無効にしています。これはオプションです-誤ってBowerにパッケージをインストールさせないようにしました。

糸のプロジェクト設定

Yarnをプロジェクトで使用するには、いくつかのことを行う必要があります。

  • プロジェクトにpackage.jsonファイルがあることを確認してください。プロジェクトディレクトリの下に配置する必要があります。最初に、ファイルの内容には開き括弧と閉じ括弧が含まれている必要があります。

{
}
  • Wwwrootの下にlibディレクトリがあることを確認してください。

次のディレクトリ構造は、これら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ボタンをクリックし、次のようにフィールドに入力します。

  • タイトル：糸追加
  • コマンド（ディレクトリは異なる場合があります）：C：\ Program Files（x86）\ Yarn\bin\yarn.cmd
  • 引数：--modules-folder = wwwroot\libを追加します
  • 初期ディレクトリ：$（ProjectDir）

これらのチェックボックスも有効にします。

  • 出力ウィンドウを使用
  • 引数のプロンプト

[〜＃〜] ok [〜＃〜]ボタンをクリックして、ショートカットを保存します。

これで、ツールメニューの下に糸の追加アイテムがあるはずです。それをクリックすると、入力引数を求めるポップアップが表示されます：

Yarn Popup

必要なのは、最初の編集ボックスをクリックしてパッケージを追加するだけです。たとえば、jqueryを追加するには：

Yarn Add JQuery

ポップアップで[OK]をクリックすると、Yarnが魔法をかけてパッケージをインストールするはずです。

その他の考慮事項

  • Node開発はしないので、上記がどのように影響するかを考慮していません。Node開発、 Yarnを使用してパッケージをnode_npmフォルダーにインストールし、動作するかどうかを確認します。
  • BowerがインストールできるがYarnがインストールできないパッケージがあると思う。うまくいけば、このギャップは狭くなります。
27
chue x

糸とnpmはまったく同じものです。 yarnまたはnpmを使用して、まったく同じ目標を達成し、ノードパッケージをインストールできます。これは、bowerがnode_modulesの代わりにプロジェクトWebアセットに追加したことを除いて、bowerが以前に行ったことと似ています。

WebPackは、純粋にクライアント側のWebアセットを構築し、それらを依存関係にバンドルするためのツールです。

これが必要ない場合は、従来のプロジェクトに引き続きbowerまたはNugetを使用してください。新しいプロジェクトの場合は、WebPackとyarn/npmを使用します。

3
Martin

私の意見では、簡単なオプションは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ファイルで指定されたフォルダーにインストールされます。

0
Adam