S️ создание нового проекта TypeScript React

Запуск нового фронтенд-проекта может быть довольно трудоемким. Большая часть времени уйдет на настройку процесса сборки. Все мы знаем, как сложно настроить Webpack с загрузчиками и файлами конфигурации.

Но все могло измениться. У нас есть двое (относительно) новых детей в блоке;

# 0CJS

В последнее время вокруг 0CJS (JavaScript с нулевой конфигурацией) есть довольно много неясностей. Все дело в отличном опыте разработчика. Это имеет смысл для настройки инструментов сборки, таких как Parcel или Webpack. Для более сложных проектов может потребоваться огромная работа, чтобы правильно настроить его.

Parcel утверждает, что является молниеносно быстрым сборщиком веб-приложений с нулевой конфигурацией. Все это звучит неплохо, но действительно ли это работает "из коробки"? А чем Webpack 4 по сравнению с Parcel?

Требования к приложению

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

  • Реагировать
  • TypeScript (TSX)
  • Возможность импорта:
  • Модули JavaScript (очевидно)
  • Модули CSS
  • Шрифты
  • Картинки
  • Возможности сервера разработки

Настройте сборку с помощью Webpack 4

Команда Webpack для версии 4 сосредоточила внимание в основном на производительности и улучшенной конфигурации по умолчанию. Например, Webpack по умолчанию работает в производственном режиме. А для некоторых проектов, предназначенных только для JS, он даже работает «из коробки» без какой-либо настройки.

Поскольку мы хотим создать немного более продвинутое приложение, нам все еще нужно настроить множество вещей, чтобы заставить его работать. Это немного разочаровывает, потому что каждому проекту нужны CSS и изображения, чтобы он выглядел красиво. Было бы здорово, если бы эти базовые требования работали «из коробки».

Настройка загрузчиков:

rules: [
    {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
    },
    {
        test: /\.css$/,
        use: [
            {
                loader: "style-loader"
            },
            {
                loader: "css-loader",
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: "[name]_[local]_[hash:base64]",
                    sourceMap: true,
                    minimize: true
                }
            }
        ]
    }
]

Для наших требований нам необходимо настроить загрузчики файлов для TypeScript, модулей CSS, шрифтов и изображений в файле webpack.config.js. К сожалению, нам все еще нужен ExtractTextPlugin, чтобы иметь возможность объединить весь CSS приложения в один файл.

Настройка подключаемых модулей:

plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ExtractTextPlugin()
]

Последний шаг в настройке сборки - настройка сервера разработки с помощью Hot Module Reloading. Это также не входит в конфигурацию Webpack по умолчанию и требует некоторых дополнительных зависимостей.

Настройка devserver:

devServer: {
    contentBase: './dist',
    hot: true
}

Даже с улучшенными настройками по умолчанию Webpack 4 настройка нового проекта все еще является сложной задачей. Все загрузчики и плагины по-прежнему необходимы, и по умолчанию включен только загрузчик JavaScript. Но в этом есть и некоторые преимущества. Вы можете очень гибко настраивать Webpack. И в этом определенно сильная сторона Webpack.

Что особенного в Webpack 4?

  • Почти все настраивается
  • Большое сообщество
  • Значительно улучшенная скорость компиляции по сравнению с v3 (исходный код)
  • Хорошо финансируемые и проверенные участники
  • Улучшенная конфигурация по умолчанию

Что плохого в Webpack 4?

  • Практически все настраивается (и требует настройки)
  • Первоначальная настройка все еще довольно интенсивная
  • Базовые вещи, такие как модули CSS, не работают "из коробки".
  • Не вся документация и плагины готовы для v4

Настройте сборку с помощью Parcel Bundler

Вероятно, одним из самых популярных новых инструментов сборки является Parcel Bundler. Неужели это так быстро и легко настроить, как обещают? Давайте узнаем, настроив наш новый проект.

Одной из замечательных особенностей Parcel является то, что он поддерживает index.html в качестве точки входа. Используя этот HTML-файл, он автоматически объединит все ссылки в этом файле. Итак, когда мы создаем файл index.js и включаем его в index.html, Parcel также просматривает файл index.js и объединяет все необходимые модули.

Это будет работать даже для файлов TypeScript! Таким образом, мы можем легко включить index.ts файл в index.html, и Parcel автоматически скомпилирует TypeScript в JavaScript. Также поддерживаются файлы TSX.

index.html:

<html>
<head>
    <title>React Parcel TypeScript Example</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.ts"></script>
</body>
</html>

Чтобы CSS-модули работали с Parcel, нам нужно немного настроить. Просто добавьте .postcss файл {"modules": true} в корневой каталог.

index.ts:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import { App } from './containers/App'

ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

App.tsx:

import * as React from 'react'
import * as styles from './App.css'

export const App = (props) =>
    <div className={styles.app}>
        {props.children}
    </div>

Все это звучит здорово, правда? Почти никакой конфигурации и очень мощный по умолчанию. Пока вы не захотите настроить свою сборку для более продвинутого использования. Например, возможность импортировать файлы Markdown. Следовательно, вам необходимо установить (или написать свои собственные) плагины.

Каждая зависимость NPM, имя которой начинается с parcel-plugin-..., распознается как плагин Parcel и включается автоматически. Это упрощает расширение, но менее прозрачно, чем отдельный файл конфигурации.

Что особенного в Parcel Bundler?

  • Очень быстро настраивается
  • Для большинства проектов это решение plug-n-play.
  • Сервер разработки встроен
  • Очень быстрое время компиляции (исходный код)
  • index.html как точка входа

Что плохого в Parcel Bundler?

  • Пользовательская конфигурация требует (написания) плагина Parcel
  • На заднем плане происходит много волшебства
  • Относительно небольшое сообщество (все еще)
  • Придется доказать себе будущее

И победителем становится…?

Вы могли заметить, что настройка нового проекта с использованием Webpack 4 - это больше о написании конфигурации, чем о написании кода вашего приложения. Настройка этого с помощью Parcel фактически начинается с написания самого приложения. Благодаря этому вы чувствуете себя отлично как разработчик благодаря мгновенным результатам!

Но кто из них победитель? Новый ребенок, Parcel, или зрелый и опытный Webpack? Что ж, не все так просто.

Parcel отлично подходит для быстрого создания новых проектов. Это может быть очень полезно для НИОКР или домашних проектов. Возможно, было бы неплохо заменить Webpack на Parcel, но необходимо доказать, что он может развиваться и стать таким же зрелым, как сегодня Webpack.

Webpack - безопасный выбор. Он существует уже несколько лет, имеет большое сообщество и очень зрелый. Гибкость делает его идеальным для крупных проектов, требующих расширенной настройки. Опыт разработчика может быть не таким хорошим, как с Parcel, но команда уже работает над Webpack 5, который выглядит очень многообещающим. Такие функции, как Presets и CSS/HTML/File Module Types, должны радикально улучшить процесс настройки нового приложения.