Фон

Мы решили, что для всех новых функций в нашем продукте мы будем использовать Reactjs для разработки на стороне клиента. Наш продукт существует уже более пяти лет и прошел путь от использования ASP.NET MVC 3 до ASP.NET MVC 5, пройдя через все другие промежуточные версии. Мы выполняем всю фронтенд-работу с AngularJS. По мере развития продукта мы решили как команда, что для всех новых функций мы будем использовать новейшие технологии, чтобы, когда придет время выполнить полную миграцию, будет проще.

Переход на Reactjs имел смысл, но я не буду обсуждать причины этого. Теперь, когда для разработки появилась новая функция, мы подключили API-интерфейсы к ASP.NET Web API 2.0, и я начал свой путь подключения React к приложению. Наш код на стороне клиента организован и структурирован по функциям, поэтому настроить его и запустить было довольно просто.

Установка пакетов npm

Я предполагаю, что у вас установлен узел, в противном случае я предлагаю установить последнюю версию. Мое приложение находится в папке ./Content/App/RefundEmd, но файл package.json находится в корне приложения ASP.NET. Причина в том, что мы можем поделиться package.json с другими js-приложениями, которые мы запускаем в папке содержимого.

Вы можете создать свой файл package.json в папке приложения. Имейте в виду, что если вы запустите npm install, все модули узлов будут установлены в папку, в которой находится ваш package.json.

Чтобы создать package.json в Visual Studio:

  1. Перейдите в папку вашего приложения (папка, из которой вы будете собирать приложение) и нажмите Открыть папку в проводнике.
  2. В адресной строке выделите все и введите cmd
  3. Это откроет командную строку и в командной строке запустите npm init, набрав npm init
  4. У Node будет куча вопросов, на которые вы сможете ответить.
  5. Вам нужно будет заполнить обязательные поля (name и version), а также поле main . Можно также оставить значения по умолчанию.
  6. Имя будет обозначать имя вашего приложения, а версия будет обозначать версию вашего приложения и так далее.
  7. После того, как вы закончите отвечать на предоставление этих метаданных для вашего приложения, в вашей папке будет создан файл package.json.

Вскоре после создания файла package.json вы заметите, что файл package.json не является частью вашего приложения. Нажмите кнопку показать все вверху под проводником решений и включите файл в проект, и он будет доступен в вашем проекте.

Я предпочитаю использовать Visual Studio Code при разработке любого JavaScript. Он поддерживает новейшие функции JavaScript и предлагает встроенную отладку узлов. Еще одна замечательная особенность - это встроенный терминал, который очень удобен.

Используя терминал (командная строка Powershell в Visual Studio Code), перейдите в папку приложения (если вы еще не в этой папке) или в папку, в которой находится package.json.

  1. Устанавливаем React, запускаем команду npm install - сохраняем response-dom. См. ниже:

Команда «- save» позволит сохранить две библиотеки в зависимости от приложения в файле «packages.json». Если вы впервые запускаете npm install в своем приложении, для вас будет создана папка «node_module». Папка содержит все библиотеки зависимостей, которые необходимы вашему приложению.

Необходимые основы

Это несколько вещей, которые необходимы для приложения React.

  1. Вавилон для транспиляции:

React использует JSX, который представляет собой XML-подобный синтаксис встроенного JavaScript. Итак, вам нужен Babel для преобразования JSX и ES6 / 7 в JavaScript 2015. Babel - это препроцессор, который преобразует JSX и ES6 / 7 в обычный JavaScript ES5. Установите babel как зависимость для разработки. Чтобы установить babel как компонент разработки, запустите:

npm i - save-dev @ babel / core babel-loader @ babel / preset-env @ babel / preset-react

Babel предлагает два метода настройки для использования в проекте.

а.) Вы можете добавить в проект файл .babelrc. Подробнее о .babelrc здесь

б.) Вы можете настроить babel в файле package.json. Преимущество настройки в package.json состоит в том, что в вашем проекте будет меньше файлов. Для настройки вы добавляете раздел под названием babel в свой файл package.json. Подробнее см. Здесь

2. Webpack для объединения

Вам необходимо объединить и минимизировать пакеты в формате, который будет использовать браузер. Для разработки вам понадобится пакет, который возьмет весь ваш JavaScript и разумно упакует их для браузера. Webpack - очень хороший сборщик. Webpack объединяет JavaScript, CSS, изображения и HTML в небольшие миниатюрные файлы. Прелесть webpack в том, что он содержит огромную экосистему и огромную систему загрузчиков. Чтобы установить webpack и его cli, запустите: npm i - save-dev webpack webpack-cli

3. webpack.config.js

Добавьте webpack.config в корень вашего приложения. Webpack настраивается с помощью одного объекта, который определен в файле webpack.config.js и помещается в корень проекта.

Создайте файл в корне приложения и назовите его «webpack.config.js». Webpack настраивается путем экспорта одного объекта. Мой webpack.config выглядит так, как показано ниже.

Из файла мы можем видеть, что запись приложения - app.js, а вывод - в файл returnEmd.js, который будет создан в папке dist для распространения. Подробнее о webpack и о том, как настроить его конфиг, читайте здесь

Раздел сценария в «package.json»

Раздел сценария в файле package.json - это раздел, в котором определены команды, которые могут выполняться в течение жизненного цикла приложения.

Свойство «scripts» - это словарь, содержащий команды сценария, которые выполняются в разное время в жизненном цикле вашего пакета. Ключ - это событие жизненного цикла, а значение - это команда, которую нужно запустить в этот момент. См. Npm-scripts, чтобы узнать больше о написании скриптов пакетов.

В разделе скриптов вам нужно сообщить приложению, как запускаться. Ниже приведен фрагмент моего раздела скриптов,

В вашем терминале, если вы запустите «npm run webpack», он должен скомпилироваться, а миниатюрный файл должен быть выгружен в папку dist. Вы можете ссылаться на файл в вашем представлении.

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