Pertanyaan Bergerak menjauh dari Bower (dihentikan) untuk menggunakan Benang / Npm sebagai gantinya (.Net Core MVC) VS2017


Saya mulai mengerjakan aplikasi .Net Core sekitar 1 tahun yang lalu. Saya menggunakan .Net Core untuk mengatur proyek saya di studio visual dan menggunakan Bower untuk mengelola paket sisi klien saya. Kelihatannya bower aku s dipelihara / dihentikan dan "orang yang bertanggung jawab" menyarankan untuk menggunakan yarn atau webpack sebagai gantinya.

Jadi pertanyaan saya adalah bagaimana saya mulai menggunakannya yarn dari pada bower? (atau npm jika itu lebih tepat)

Ketika saya memulai proyek saya, saya menggunakan bower dari dalam pengelola paket Visual Studio hanya dengan mengetik:

bower install <package-name>

Dan berhasil menginstal file / direktori dalam wwwroot/lib/ map. Saya hanya harus menambahkan ketergantungan pada saya _Layout.cshtml dan semuanya bekerja dengan sempurna.

<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>

Saya merasa cukup sulit untuk mencari tahu bagaimana menggunakan benang atau npm untuk mencapai "kemudahan" yang sama dalam Visual Studio 2017. Saya sudah memiliki akses ke file minifying melalui BundlerMinifier.Core Paket NuGet, dan saya percaya itu secara otomatis untuk file dalam saya, jadi itu bukan persyaratan untuk solusi yang ingin saya gunakan.

Saya telah mencoba googling, tetapi tampaknya ini bukan masalah yang sangat umum. Dan semua tautan yang saya temukan menyarankan menggunakan npm dan mengatur gulp untuk memindahkan file wwwroot/lib/ dan saya mencobanya tetapi saya mendapatkan beberapa kesalahan aneh dalam melakukannya.

Bagaimana saya bisa menggunakan yarn untuk menginstal paket dengan yang serupa dengan yang saya lakukan bower? atau harus saya gunakan npm sebagai gantinya?


32
2018-06-30 10:14


asal


Jawaban:


Saya memiliki pertanyaan yang sama dengan Anda dan menemukan bahwa Benang tidak terlalu sulit untuk digunakan. Di sini saya membahas pemasangan Benang, tweak ke Visual Studio 17, dan alur kerja proyek.

Instalasi Benang

Untuk menjalankan Benang, Anda perlu memasang dua hal:

Nonaktifkan NPM di Visual Studio 2017

Benang menggunakan file dalam proyek Anda, package.json, untuk melacak apa yang telah dipasang. NPM juga menggunakan file yang sama. Untuk menghindari konflik, saya telah menonaktifkan kait NPM di Visual Studio. Jika diaktifkan, kait ini akan menyebabkan NPM untuk memuat paket kapan saja package.json perubahan.

Untuk menonaktifkan NPM, buka Alat-alat menu dan pilih Pilihan.... Di pohon di sebelah kiri, buka: Proyek dan Solusi -> Manajemen Paket Web -> Paket Kembalikan. Di sisi kanan nonaktifkan kait NPM dengan mengubah kedua opsi menjadi Salah:

Disable NPM in Visual Studio

Pada gambar di atas saya juga telah menonaktifkan kait untuk Bower. Ini opsional - Saya melakukannya sehingga tidak sengaja Bower memasang paket apa pun.

Pengaturan Proyek untuk Benang

Untuk menggunakan Benang dengan proyek Anda, Anda perlu melakukan beberapa hal:

  • Pastikan proyek tersebut memiliki package.json mengajukan. Ini harus ditempatkan di bawah direktori proyek. Awalnya isi file harus berisi kurung buka dan kurung tutup:

{
}
  • Pastikan ada lib direktori di bawah wwwroot.

Struktur direktori berikut menunjukkan contoh proyek dengan dua hal berikut:

+ Solution
    + Project
        + wwwroot
            + lib
        + Program.cs
        + Startup.cs
        + package.json

Benang Penggunaan / Alur Kerja Proyek 

Inilah bagian yang Anda tunggu-tunggu. Pertama buka konsol pengelola paket. Konsol ini hanya konsol powershell dalam VS. Ketika terbuka Anda akan berada di direktori solusi, sehingga Anda perlu CD ke direktori proyek. Setelah itu Anda dapat menambahkan pustaka menggunakan Benang:

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib bootstrap@v4.0.0

Paket sekarang diinstal di bawah wwwroot \ lib, karena disitulah Anda memberi tahu Benang untuk menginstalnya.

Menambahkan Pintasan Benang di Visual Studio 2017

Jika Anda berpikir bahwa bagian sebelumnya melibatkan terlalu banyak mengetik, Anda dapat menyederhanakan berbagai hal dengan menambahkan pintasan di VS. Ketika ini diatur, Benang akan secara otomatis berjalan dari direktori proyek, menentukan folder target. Yang harus Anda lakukan adalah memberi tahu paket apa yang harus dipasang.

Di dalam Visual Studio, klik pada Alat-alat > Alat Eksternal ... dari menu. Di jendela munculan, klik Menambahkan tombol dan isi bidang sebagai berikut:

  • Judul: Benang Tambah
  • Command (dir Anda mungkin berbeda): C: \ Program Files (x86) \ Yarn \ bin \ yarn.cmd
  • Argumen: tambahkan --modules-folder = wwwroot \ lib
  • Direktori awal: $ (ProjectDir)

Aktifkan juga kotak centang ini:

  • Gunakan Output Window
  • Prompt untuk argumen

Klik baik untuk menyimpan pintasan.

Jadi sekarang Anda harus memiliki Benang Tambah item di bawah Alat-alat menu. Klik dan Anda akan mendapatkan popup yang menanyakan argumen input:

Yarn Popup

Yang harus Anda lakukan adalah klik pada kotak edit pertama dan tambahkan paket Anda. Misalnya, untuk menambahkan jquery:

Yarn Add JQuery

Klik OK pada popup dan Benang harus bekerja sihirnya dan menginstal paket Anda.

Pertimbangan Lain

  • Saya tidak melakukan pengembangan Node, jadi saya belum mempertimbangkan bagaimana hal di atas akan berdampak. Bagi mereka yang melakukan pengembangan Node, sesuatu untuk mencoba akan menggunakan Benang untuk menginstal paket ke folder node_npm dan melihat apakah ada yang berfungsi.
  • Saya menduga bahwa saat ini ada paket yang Bower dapat menginstal Benang itu tidak bisa. Semoga seiring waktu, kesenjangan ini menyempit.

16
2018-01-23 20:16



Benang dan npm sangat banyak hal yang sama. Anda dapat menggunakan benang atau npm untuk mencapai tujuan yang sama, memasang paket node. Ini mirip dengan apa yang dilakukan bower untuk Anda sebelumnya, kecuali bahwa bower menambahkannya ke aset web proyek Anda, bukan node_modules.

WebPack adalah alat murni untuk membangun aset web sisi klien dan menggabungkannya dengan dependensi.

Jika Anda tidak membutuhkannya, terus gunakan Bower atau Nuget untuk proyek-proyek warisan. Untuk proyek baru, gunakan WebPack dan benang / npm.


2
2017-08-16 21:40