Отключение от Bower (прекращено) для использования Yarn/Npm вместо (.Net Core MVC) VS2017

Я начал работать над приложением .Net Core около года назад. Я использовал .Net Core для настройки моего проекта в визуальной студии и использовал 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, и я считаю, что он это делает автоматически для файлов внутри моего, так что это не является обязательным для решения, которое я хочу использовать.

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

Вот часть, которую вы так долго ждали. Сначала откройте консоль менеджера пакетов. Консоль - это просто консоль PowerShell в VS. Когда вы будете открыты, вы попадете в каталог решений, поэтому вам нужно будет записать CD в каталог проекта. После этого вы можете добавлять библиотеки с использованием пряжи:

cd [project dir]
yarn add --modules-folder=wwwroot\lib jquery
yarn add --modules-folder=wwwroot\lib [email protected]

Пакеты теперь устанавливаются под wwwroot\lib, потому что именно там вы указываете пряжу, чтобы установить их.

Добавление ярлыка пряжи в Visual Studio 2017

Если вы считаете, что в предыдущем разделе задействовано слишком много ввода, вы можете упростить его, добавив ярлык в VS. Когда это установлено, пряжа автоматически запускается из каталога проекта, указывая целевую папку. Все, что вам нужно сделать, это сказать, какой пакет установить.

Внутри Visual Studio выберите в меню Инструменты > Внешние инструменты.... В раскрывающемся списке нажмите кнопку "Добавить" и заполните поля следующим образом:

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

Также установите эти флажки:

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

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

Итак, теперь вы должны добавить элемент "Пряжировать" в меню "Инструменты". Нажмите на него, и вы получите всплывающее окно с запросом на ввод аргументов:

Прямой всплывающий

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

Пряжа Добавить JQuery

Нажмите "ОК" во всплывающем окне, и "Пряжа" должна использовать свою магию и установить пакет.

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

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