Реагируйте с помощью Typescript и Webpack

Почему я пишу это

На момент написания этой статьи популярность React уже резко возросла, популярность Typescript находится на подъеме, и можно с уверенностью сказать что Webpack является наиболее предпочтительным современным сборщиком модулей для приложения. Однако по-прежнему существует нехватка хорошего примера наилучшего способа начать проект в React с помощью Typescript и Webpack. При этом есть хорошие ресурсы, если вы хотите использовать cli create-react-app или любой другой стартовый набор реакции. Но их очень мало, если вы хотите иметь контроль над конфигурациями вашего приложения.

Обратной стороной использования cli, такого как create-react-app, является то, что вам нужно полагаться на следующие инструменты так же, как и на create-react-app.

  • Webpack
  • Вавилон
  • PostCSS с автопрефиксом
  • Шутка
  • Поток (необязательно)

Если вам сильно не нравится что-либо из вышеперечисленного, вам будет трудно принять это. create-response-app оправдывает свое обещание «без конфигурации сборки», потому что вы просто не можете настроить этот инструмент. Он предоставляет способ выброса инструментария, где вы можете отпустить приложение create-react-app, если хотите расширить конфигурацию дальше, но почему я должен? Не было бы намного проще, если бы я занимался настройкой с самого начала? Более того, как только вы извлечете, количество зависимостей вашего проекта возрастет, половина из которых вам может даже не понадобиться. Сказав все это, это, вероятно, лучший инструментарий для запуска вашего проекта, если вы ищете его как новичок или для проекта малого и среднего уровня.

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

  • React - основной интерфейсный фреймворк.
  • Машинопись - основной язык, который компилируется в javascript.
  • Webpack - сборщик приложений.
  • Express - сервер, на котором будет размещено приложение для реагирования.
  • Горячая перезагрузка модуля - что-то, что будет обслуживать и загружать все изменения вашего кода, которые вы вносите, пока сервер работает в браузере, без необходимости останавливать и снова запускать приложение.

Начнем реагирование, написание сценария и упаковка!

Прежде чем мы начнем, создайте пустую папку где-нибудь на вашем диске, чтобы начать все сначала. Если вы используете машину с Windows, перейдите в терминал командной строки и введите следующие три команды.

mkdir react-ts-webpack
cd react-ts-webpack
code .

последняя команда откроет недавно созданную пустую папку как проект в Visual Studio Code, довольно популярном редакторе, и, скорее всего, она у вас есть. Не стесняйтесь открывать его в своем любимом редакторе, если у вас его нет.

Итак, по популярной традиции, когда вы создаете новый проект, инициализируйте npm в нашем проекте, набрав следующую строку в терминале.

npm init -y

Теперь мы собираемся создать несколько файлов и папок, которые необходимы для настройки проекта. Итак, в корне вашей папки создайте следующие файлы / папки.

  • Создайте файл webpack.config.js: Это для конфигураций веб-пакетов
  • Создайте файл tsconfig.json: Это для конфигураций машинописного текста
  • Создайте файл server.js: это ваш сервер для запуска приложения
  • Создайте папку src.
  • Создайте папку app внутри src.
  • Создайте файл index.html внутри app и папку components
  • Создайте файлы App.tsx внутри app и Hello.tsx внутри компонентов

Итак, структура папок приложения выглядит примерно так

|-src
  |-app
    |-components
      |-Hello.tsx
    |-App.tsx
    |-index.html
|-package.json
|-package-lock.json
|-server.js
|-tsconfig.json
|-webpack.config.js

Да начнется загрузка!

Теперь мы собираемся загрузить наши производственные и разрабатываемые зависимости.

Скачать производственные зависимости

npm i react react-dom express typescript --save

Скачать зависимости для разработки

npm i @types/react @types/react-dom webpack webpack-cli ts-loader webpack-dev-middleware webpack-hot-middleware html-webpack-plugin source-map-loader -D

Поздравляю! мы почти на полпути, не написав ни единого фрагмента кода.

Давайте код!

Итак, вот содержимое только что созданных файлов. Вы можете вставить их в свой относительный проект отсюда (основная ссылка встроена в заголовок файла) или ввести.

Давайте немного отреагируем!

Давайте напишем типичный компонент реакции, в конце концов, это код, на котором вы будете и должны сосредоточиться после завершения настройки.

Итак, вы можете писать или вставлять код, как вам нравится.

Hello.tsx:

import * as React from 'react';
interface IProps {
   compiler: string,
   framework: string,
   bundler: string
}
export class Hello extends React.Component<IProps, {}> {
   render() {
   return <h1>This is a {this.props.framework} application using    {this.props.compiler} with {this.props.bundler}</h1>
   }
}

App.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Hello } from './components/Hello';
ReactDOM.render(<Hello compiler="Typescript" framework="React" bundler="Webpack" />,
document.getElementById('root'));

Пойдем собираться!

Если вы не знакомы с webpack, ниже приводится краткое описание опций. Не стесняйтесь пропустить это, если вы уже знаете об этом.

  • entry. Веб-пакет работает так: вы предоставляете ему запись, и он пробирается вверх, чтобы создать ваше приложение, изучая, что импортирует ваша запись, и соответственно создает граф зависимостей. больше свойств, которые вы предоставляете этому объекту, такое же количество пакетов, которое он собирается создать, поэтому, просмотрев конфигурацию entry и output, вы можете догадаться, что он собирается для создания app.bundles.js и vendor.bundles.js. Причина наличия отдельных пакетов заключается в том, что ваш код реакции и реагирования вряд ли будет изменен, поэтому наличие их в виде отдельного пакета (называемого поставщиком) имеет смысл для вашего браузера, чтобы иметь возможность кэшировать его для повышения производительности. Webpack-hot-middleware / client в свойстве app присутствует для включения перезагрузки кода приложения в реальном времени.
  • вывод: Webpack проверяет эту конфигурацию, когда ему нужно передать связанный код из вашего приложения на диск. путь - это выходной каталог для кода, который будет написан, а filename - это имя, предполагающее имя файла, который будет дан выходному коду.
  • devtool: Webpack просматривает эту конфигурацию, чтобы добавить определенные инструменты для разработки. Здесь добавлена ​​карта источников, так что код отображается в браузере, чтобы облегчить отладку во время разработки.
  • решить: Webpack смотрит здесь, чтобы решить, следует ли рассматривать этот файл для объединения или оставить его, поэтому в нашем приложении он рассматривает файлы с расширениями js ',' jsx ',' json ',' ts ',' tsx 'для объединения.
  • модуль: эта конфигурация позволяет веб-пакету загружать определенный файл по запросу приложения с помощью загрузчиков. В нашем приложении мы используем ts-loader и source-map-loader. source-map-loader уже рассмотрен выше. Таким образом, без ts-loader веб-пакет не смог бы понять этот импорт в файле App.tsx, поскольку компонент Hello - это ' tsx ', который понимает ваш редактор, но не веб-пакет, когда фактически происходит импорт.
import { Hello } from './components/Hello';
  • плагины: Webpack не может делать все, и ожидать от него всего - неправильно. Таким образом, он преодолевает свое ограничение, предоставляя плагины, позволяющие расширить его возможности, например, html-webpack-plugin создает файл шаблона, который будет обслуживаться браузером из нашего index.html в папке src, а плагин HotModuleReplacement позволяет выполнять горячую перезагрузку нашего кода, избавляя от необходимости останавливать сервер и запускать его снова каждый раз, когда вносятся изменения. в приложение.

Строим!

Теперь вы можете вручную создать свое приложение. Мы перейдем к созданию автоматически, прежде чем запускать наш сервер позже. но пока, если вы хотите взглянуть на свои усилия до сих пор, просто добавьте сценарий «build» в свой файл package.json и выполните команду webpack.

package.json:

...
scripts: {
...
"build": "./node_modules/.bin/webpack",
...
}
...

Если вы войдете в терминал и запустите эту команду, вы можете посмотреть свое связанное приложение в папке dist.

Запустите это в своем терминале:

npm run build

Вывод в терминале:

Давай экспресс!

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

server.js:

const path = require('path'),
   express = require('express'),
   webpack = require('webpack'),
   webpackConfig = require('./webpack.config.js'),
   app = express(),
   port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`App is listening on port ${port}`) });
app.get('/', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
let compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true, publicPath: webpackConfig.output.publicPath, stats:    { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'dist')));

Теперь вы можете перейти к своему package.json и добавить стартовый скрипт

"start": "npm run build && node server.js"

Давайте перезагрузим!

После того, как вы запустите сервер, запустив «npm start» в терминале, webpack-dev-middleware и webpack-hot-middleware должны позаботиться о горячей замене модуля, но это не так.

Вы можете заметить, что после внесения изменений webpack должным образом компилирует и излучает измененный код, но это вступает в силу только после обновления вашего браузера. Мы подписывались не на это. Браузер должен был обновиться после повторной сборки измененного компонента.

Чтобы исправить это, нам нужно немного изменить наш ‘App.tsx’

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Hello } from './components/Hello';
declare let module: any
ReactDOM.render(<Hello compiler="Typescript" framework="React..." bundler="Webpack" />,
document.getElementById('root'));
if (module.hot) {
   module.hot.accept();
}

По сути, мы говорим, что наше приложение принимает изменения горячей перезагрузки, сделанные с помощью webpack. Часть объявления необходима, потому что свойство «hot» по умолчанию не присутствует в объекте «module», и нам нужно запросить машинный текст, чтобы разрешить его.

После перезапуска сервера после этого изменения он работает должным образом.

В случае, если вы хотите просмотреть полную пластину котла, создайте. Вы можете клонировать / скачать из этого репозитория



saurabhpati / react-ts-webpack-markerplate
react-ts-webpack-markerplate - это самый легкий шаблон, необходимый для приложения React, использующего… github .com



Я постараюсь добавить разделение кода, чтобы еще больше повысить эффективность процесса сборки, и буду рад получить любые отзывы об этом посте.