it-swarm.com.ru

Отход от Бауэра (прекращено) вместо использования пряжи/Npm (.Net Core MVC) VS2017

Я начал работать над приложением .Net Core около 1 года назад. Я использовал .Net Core для настройки своего проекта в visual studio и использовал Bower для управления пакетами на стороне клиента. Кажется, что bowerподдерживается/прекращается , и «ответственные лица» предлагают вместо этого использовать yarn или webpack

Поэтому мой вопрос заключается в том, как мне начать использовать yarn вместо bower? (или npm, если это более уместно)

Когда я начал свой проект, я использовал bower из диспетчера пакетов Visual Studio, просто набрав:

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>

Мне трудно понять, как использовать пряжу или npm для достижения той же «легкости» в Visual Studio 2017. У меня уже есть доступ к минимизации файлов с помощью пакета BundlerMinifier.Core NuGet, и я считаю, что он делает это автоматически для файлов в моем , так что это не требование для решения, которое я хочу использовать.

Я пробовал гуглить, но, похоже, это не очень распространенная проблема. И все ссылки, которые я нашел, предлагали использовать npm и настроить gulp для перемещения файлов в wwwroot/lib/, и я попробовал это, но получаю некоторые странные ошибки при этом.

Как я могу использовать yarn для установки пакетов с аналогичным, как я сделал с bower? или я должен использовать вместо этого npm?

38
Zeliax

У меня был такой же вопрос, как и у вас, и я узнал, что пряжа не слишком сложна в использовании. Здесь я обсуждаю установку Yarn, настройки Visual Studio 17 и рабочий процесс проекта.

Установка пряжи

Чтобы запустить Yarn, вам нужно установить две вещи:

Отключить NPM в Visual Studio 2017

Yarn использует файл в вашем проекте package.json, чтобы отслеживать, что он установил. NPM также использует тот же файл. Чтобы избежать любых конфликтов, я отключил перехватчики NPM в Visual Studio. Если эта опция включена, эти перехватчики будут заставлять NPM загружать пакеты при каждом изменении package.json.

Чтобы отключить NPM, перейдите в меню Инструменты и выберите Параметры .... В дереве слева перейдите к: Проекты и решения -> Управление веб-пакетами -> Восстановление пакетов. В правой части отключите перехватчики NPM, изменив обе опции на False:

 Disable NPM in Visual Studio

На изображении выше я также отключил крючки для Bower. Это необязательно - я сделал это так, чтобы Bower случайно не установил какие-либо пакеты.

Настройка проекта для пряжи

Чтобы использовать Yarn с вашим проектом, вам нужно сделать пару вещей:

  • Убедитесь, что в проекте есть файл package.json. Он должен быть расположен под каталогом проекта. Изначально содержимое файла должно содержать открывающую и закрывающую скобки:

{
}
  • Убедитесь, что в каталоге wwwroot есть каталог lib.

Следующая структура каталогов показывает пример проекта с этими двумя вещами:

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

Использование пряжи/Рабочий процесс проекта 

Вот та часть, которую вы так долго ждали. Сначала откройте консоль диспетчера пакетов. Консоль - это просто консоль PowerShell в VS. Когда откроется, вы будете в каталоге решения, поэтому вам нужно будет 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 щелкните Инструменты> Внешние инструменты ... в меню. Во всплывающем окне нажмите кнопку Добавить и заполните поля следующим образом:

  • Название: Пряжа Добавить
  • Команда (ваш каталог может быть другим): C:\Program Files (x86)\Yarn\bin\yarn.cmd
  • Аргументы: добавьте --modules-folder = wwwroot\lib
  • Начальный каталог: $ (ProjectDir)

Также включите эти флажки:

  • Использовать окно вывода
  • Запрашивать аргументы

Нажмите кнопку OK, чтобы сохранить ярлык.

Теперь у вас должен быть элемент Yarn Add в меню Инструменты. Нажмите на него, и вы получите всплывающее окно с просьбой ввести аргументы:

 Yarn Popup

Все, что вам нужно сделать, это нажать на первое поле редактирования и добавить свой пакет. Например, чтобы добавить jquery:

 Yarn Add JQuery

Нажмите OK во всплывающем окне, и Yarn должен поработать над своей магией и установить пакет.

Другие соображения

  • Я не занимаюсь разработкой Node, поэтому я не думал о том, как сказанное выше повлияет на это. Для тех, кто занимается разработкой Node, можно попробовать использовать Yarn для установки пакетов в папку node_npm и посмотреть, все ли работает.
  • Я подозреваю, что в настоящее время существуют пакеты, которые Bower может установить, а Yarn - нет. Надеюсь, со временем этот разрыв сократится.
22
chue x

Пряжа и нпм очень одно и то же. Вы можете использовать yarn или npm для достижения той же цели, устанавливая пакеты узлов. Это похоже на то, что bower делал для вас ранее, за исключением того, что bower добавил их в веб-ресурсы вашего проекта вместо node_modules. 

WebPack - это инструмент, предназначенный исключительно для создания клиентских веб-ресурсов и связывания их с зависимостями. 

Если вам это не нужно, продолжайте использовать bower или Nuget для устаревших проектов. Для новых проектов используйте WebPack и yarn/npm. 

2
Martin

На мой взгляд, более простой вариант - использовать пряжу и указать, в какую папку устанавливать пакеты, используя файл rc. Вот как вы это делаете:
1) Загрузите пряжу на свой компьютер с сайта пряжи , вам нужно будет убедиться, что она включена в Путь для вашего компьютера, если вы используете Windows.
2) создайте package.json или введите «yarn init» в корне вашего проекта через командную строку (если вы введете «yarn init», он запросит несколько фрагментов информации, чтобы помочь отформатировать package.json). файл). Обратите внимание на раздел «движки» файла package.json, в котором указывается, какой движок пряжи:

{
    "version": "1.0.0",
    "dependencies": {
    "bootstrap": "4.1.3",
    "popper.js": "1.14.3",    
},
    "engines": {
    "yarn": ">= 1.0.0"
    }
}

Затем создайте файл .yarnrc, добавив новый текстовый файл в Visual Studio в проект, полное имя файла должно быть ".yarnrc" без .txt после того, как проект автоматически добавит файл .yarnrc ниже пакета. json, затем добавьте следующее в файл rc:

--modules-folder wwwroot/lib

Цитаты не нужны.

Затем просто откройте командную строку в корневой папке проектов и введите «yarn», и все пакеты будут установлены в папку, указанную в файле .yarnrc.

0
Adam