Если вы ищете стартовый комплект, основанный на сценариях NPM, поддерживающий ASP.NET Core 2.1, React, Typescript, Webpack с горячей заменой модуля и другие функции, эта статья для вас.

Сегодня наиболее очевидным выбором для начальной загрузки нового приложения React является использование шаблона Facebook create-react-app (CRA) (или create-react-app-typescript с поддержкой Typescript). Однако, если вы хотите использовать ASP.NET Core, вы можете использовать шаблон Microsoft на основе create-response-app.

Для меня create-response-app действительно замечательно, пока вам не понадобится больше контроля над вашими зависимостями и конфигурацией, и вы не вызовете npm run eject, что является односторонней операцией. Тогда вы сами по себе, потому что пути назад нет. В конце концов, для меня create-react-app имеет слишком много функций, которые мне не нужны.

Шаблон Microsoft React позволяет использовать React с ASP.NET Core, но поскольку он основан на исходном приложении Facebook create-response-app, вам нужно дважды его пересмотреть, прежде чем пытаться действовать самостоятельно и запускать командуnpm run eject . Более того, мне не нравится, как шаблон вызывает в Node.js различные сценарии npm, такие как npm install или npm run build. Они определены в свойствах проекта ASP.NET Core, содержащихся в файле *.csproj. Это удобно, когда вы запускаете dotnet команды CLI для компиляции, запуска и отладки приложения ASP.NET Core, но становится действительно болезненным, когда вам нужно определять и запускать разные сценарии npm.

Мои требования к стартовому набору React очень просты. Я хочу:

  • контролировать мои зависимости, конфигурацию, и это должно быть очень просто.
  • запустите его на веб-сервере ASP.NET Core 2.1, но все должно управляться с помощью сценариев npm, а не dotnet CLI.
  • использовать Typescript, Webpack, HMR… и многое другое

Вот почему я создал новый шаблон, который соответствует моим потребностям. Начальный комплект ASP.NET Core 2

Начальный комплект ASP.NET Core 2

ASP.NET Core Starter Kit 2 представляет собой смесь исходного ASP.NET Core Starter Kit (который, похоже, больше не активен, поэтому в названии присутствует цифра 2) и Microsoft ASP.NET Core React / Redux. шаблон". Подробное описание можно найти в репозитории проекта «https://github.com/Luteceo/aspnet-starter-kit-2.0.

Основные особенности:

  • Разработка веб-компонентов с помощью React 16.4
  • Управление состоянием приложения с помощью Redux 4.0
  • Связка с Webpack 4.16
  • Статическая проверка типов с помощью Typescript 2.9.2
  • Горячая замена модуля (HMR) с помощью React Hot Loader
  • Легкая автоматизация сборки с помощью простого JavaScript
  • Интеграция с ASP.NET Core 2.1

Легкая автоматизация сборки

Думаю, интересно сказать несколько слов об автоматизации сборки. Весь код содержится в run.js файле, адаптированном из исходного ASP.NET Core Starter Kit. Вот пример задачи start, которая связывает клиентское приложение с помощью Webpack и запускает веб-сервер ASP.NET Core:

tasks.set('start', () => {
  global.HMR = !process.argv.includes('--no-hmr');
  return Promise.resolve()
    .then(() => run('clean'))
    .then(() => run('appsettings'))
    .then(() => run('build'))
    .then(() => run('bundleVendor'))
    .then(() => new Promise(resolve => {
      let count = 0;
      const webpackConfig = require('./webpack.config');
      const compiler = webpack(webpackConfig);

      // Node.js middleware that compiles application in watch mode with HMR support
      // https://webpack.github.io/docs/webpack-dev-middleware.html
      const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
        publicPath: webpackConfig[0].output.publicPath,
        stats: webpackConfig[0].stats
      });
      compiler.hooks.done.tap('done', () => {
        // Launch ASP.NET Core server after the initial bundling is complete
        if (++count === 1) {
          const options = {
            cwd: path.resolve(__dirname, './server/'),
            stdio: ['ignore', 'pipe', 'inherit'],
            env: Object.assign({}, process.env, {
              ASPNETCORE_ENVIRONMENT: 'Development',
              NODE_PATH: '../node_modules/'
            }),
          };
          cp.spawn('dotnet', ['watch', 'run'], options).stdout.on('data', data => {
            process.stdout.write(data);
          });
        }
      });
    }));
});

Это позволяет связать и скомпилировать приложение в режиме просмотра с поддержкой HMR, а затем запустить сервер ASP.NET Core со следующей строкой:

cp.spawn('dotnet', ['watch', 'run'], options).stdout.on('data', data => {
            process.stdout.write(data);
          });

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

Запуск приложения

После клонирования шаблона с https://github.com/Luteceo/aspnet-starter-kit-2.0 вы запускаете приложение с yarn install и yarn start. Приложение должно стать доступным по адресу http: // localhost: 5000 / (подробнее здесь). HMR по умолчанию включен:

Заключение

Адаптация двух существующих стартовых наборов React позволила мне получить лучшее из двух миров и создать шаблон, который действительно соответствует моим потребностям. Без особых настроек и церемоний я добился того, чего действительно хотел; Интеграция ASP.NET Core 2.1 с React / Redux, Typescript и HMR. Надеюсь, вы найдете это полезным, оставьте свои комментарии или предложения ниже. Я также буду признателен за любые PR и проблемы. Здесь вы найдете код: https://github.com/Luteceo/aspnet-starter-kit-2.0#getting-started. Совершите экскурсию, посмотрите код и наслаждайтесь!