Недавно я работал над постепенным переписыванием существующего приложения ASP.Net/jQuery с использованием React / Redux / ES6. Под постепенным переписыванием я подразумеваю, что мы поддерживаем существующие страницы и добавляем новые по мере их завершения. Это делает работу немного медленнее и сложнее, чем было бы, если бы мы начинали заново с нуля, это также означает, что мы должны использовать существующие инструменты, в данном случае Visual Studio 2015.

Изначально я задумал этот пост как руководство по настройке среды разработки Visual Studio 2015 для использования React / ES6 с существующими приложениями ASP.Net. Это был довольно болезненный процесс обучения, который можно резюмировать в следующих шагах:

  • Установите NodeJS. Если он уже установлен, обновите его до последней стабильной версии.
  • Обновите npm, запустив в командной строке следующее: npm install npm -g
  • Установите WebPack глобально, выполнив: npm install webpack -g
  • Обновите Visual Studio 2015 до последней версии.
  • Установите одно или оба расширения Visual Studio Npm Task Runner или WebPack Task Runner.
  • Убедитесь, что Visual Studio использует последнюю версию Node и npm, которые вы установили, а не собственную старую версию:
    - В Quick Launch введите «внешние веб-инструменты».
    - Добавить путь к последней версии npm на вашем компьютере (что-то вроде C: \ Users \ yourusername \ AppData \ Roaming \ npm, можно найти в Environment Variables) и переместите запись вверх.
    - Добавьте путь к узлу (вероятно, C: \ Program Files \ nodejs) и переместитесь на 2-ю вершину сразу под путем npm.
  • Настройте сценарии сборки webpack.config / npm для использования Babel и всего остального (ESLint, Mocha и т. Д.) Для компиляции кода React / ES6. Это то же самое, что и с любой другой средой, и там много информации и шаблонов.
  • При необходимости настройте Task Runner Explorer для запуска watch версии сценариев сборки в Project Open.
  • Если вы используете профили публикации, добавьте BeforeBuild Target, который запускает сценарий npm / webpack в производственном режиме (стоит убедиться, что React не использует режим разработки при публикации из Visual Studio или CI, я этого не делал. ну поначалу так и было).

Итак, после всего этого вы можете начать продуктивно писать привлекательные интерфейсы с использованием React, ES6 и всего, что вам нравится, из Visual Studio 2015 (или даже 2013, поскольку вы можете установить Task Runner в качестве расширения).

Но, увы, ваш редактор, скорее всего, будет выглядеть примерно так:

Хотя Visual Studio 2015 поддерживает синтаксис React, при использовании ES6, похоже, действительно возникают проблемы. Вы можете видеть выше, что редактор совершенно сбит с толку модулями ES6, которые, кажется, отбрасывают его для остальной части файла. Есть несколько небольших настроек, вроде this, которые, безусловно, помогают, и Resharper также может ухудшить или улучшить ситуацию, вероятно, в зависимости от лицензионной версии.

Хотя я какое-то время игнорировал все волнистые линии и использовал ESLint для общего линтинга, чтобы компенсировать отсутствие визуальной обратной связи в реальном времени, то, что мне действительно нужно, было intellisense. Написание большого количества модульного кода в совершенно глупом текстовом редакторе непродуктивно. В конце концов я сдался и сначала посмотрел на Atom, а затем на Visual Studio Code (я искал что-то бесплатное, поэтому исключил Sublime и WebStorm) для разработки JavaScript в рамках проекта ASP.Net. Atom великолепен, но требует много настройки, Visual Studio Code отлично подходит для разработки JavaScript практически сразу после установки и очень прост в просмотре / добавлении расширений. Instellisense и окружающая среда очень богаты, просто работает без каких-либо усилий.

Я по-прежнему использую Visual Studio 2015 для создания / запуска / редактирования кода C #, но всякий раз, когда я работаю над JavaScript, а это в настоящее время большую часть времени, я переключаюсь на код Visual Studio и благодаря этому работаю гораздо более продуктивно. Следующий выпуск Visual Studio будет включать движок salsa, поэтому среда разработки JavaScript должна быть сопоставима с тем, что вы получаете с Visual Studio Code сейчас. А пока я бы рекомендовал использовать альтернативный редактор для большей части любой работы с JavaScript, а Visual Studio 2015 - только для материалов ASP.Net/C#.