Preact - это небольшой, похожий на React UI фреймворк, который обеспечивает большую мощность в ~ 3 КБ. Flow - это средство проверки статических типов, которое использует анализ потока данных для создания мощной системы статических типов поверх JavaScript. Этот пост покажет вам, как заставить их работать вместе (спойлер: это действительно просто).

Отказ от ответственности

Многие из приведенных здесь шагов не относятся к Flow. Я собираюсь провести вас через настройку нового проекта с помощью Flow и Preact, поэтому значительная часть этого руководства будет охватывать стандартную минимальную настройку Webpack + Babel, которую вы увидите для приложения Preact. .

Шаг 0 - Структура проекта

Идите вперед и создайте для этого новую папку. Называйте это preact-flow-tutorial или как хотите. Внутри этой папки создайте папку src с одним файлом index.js. Мы собираемся использовать yarn для установки и управления нашими зависимостями, но не стесняйтесь использовать вместо этого npm.

Запустите yarn init -y в новой папке. Теперь у вас должно быть следующее:

preact-flow-tutorial
  - src
    - index.js
  - package.json

Шаг 1 - Установка зависимостей

Мы должны установить наши обычные зависимости и наши зависимости для разработки. Почти все устанавливаемые нами зависимости для разработки необходимы для любого проекта Preact, за исключением flow-bin

Добавьте нашу единую зависимость во время выполнения, Preact:

yarn add preact

Затем мы добавляем зависимости от разработчиков:

yarn add --dev webpack flow-bin babel-core babel-loader babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types babel-plugin-transform-react-jsx babel-preset-es2015

Я знаю, что сразу многое нужно принять, но только 3 из 8 перечисленных пакетов относятся к Flow. Разбивая этот список:

  • webpack - это Webpack. Рад, что смог помочь.
  • flow-bin - это двоичная оболочка исполняемого файла потока. Flow написан на Ocaml, поэтому они распространяют двоичный файл, чтобы всем было проще его запускать.
  • babel-core - это основной код для Babel
  • babel-loader - это наш мост между Webpack и Babel. Это то, как Webpack знает, как использовать Babel для обработки наших файлов JavaScript.
  • babel-plugin-syntax-flow сообщает babel, как обращаться с новым синтаксисом, который вводит Flow. Я не уверен, что именно это делает, но для наших целей это не имеет особого значения.
  • babel-plugin-transform-flow-strip-types сообщает Babel, как вырезать аннотации типов при создании приложения.
  • babel-plugin-transform-react-jsx сообщает Babel, как работать с JSX, который мы будем использовать с Preact.
  • babel-preset-es2015 - это всегда популярный пресет Babel, который позволит нам использовать необычный синтаксис ES2015 (ES6).

Шаг 2 - Настройка Webpack

Что касается Flow, нам здесь не нужно делать ничего особенного. Webpack просто будет использовать babel-loader для обработки наших файлов JavaScript, а Babel сделает всю тяжелую работу, например, удаление аннотаций типа Flow. Если вы пытаетесь интегрировать Flow в существующую базу кода Preact, дополнительной настройки для Webpack не требуется.

Вот базовая конфигурация Webpack, которая подойдет для наших целей. Предполагается, что структура вашего проекта совпадает со структурой, описанной в шаге 0. Также предполагается, что вы хотите вывести файлы сборки в public.

Создайте новый файл в корне вашего каталога, webpack.config.js, и добавьте следующий код:

var path = require('path')
module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  module: {
  loaders: [{
    test: /\.js$/,
    loader: 'babel-loader'
  }]
}}

Поскольку это всего лишь минимальная конфигурация Webpack, которая не имеет ничего общего с интеграцией Flow / Preact, я пропущу ее объяснения.

Шаг 3 - Настройка Babel

Нам нужно сообщить Babel обо всех этих нездоровых пресетах и ​​плагинах, которые мы установили ранее, поэтому давайте создадим .babelrc файл в корне нашего проекта. Если вы добавляете конфигурацию Babel в конфигурацию Webpack, не стесняйтесь делать это вместо этого.

{
  "presets": ["es2015"],
  "plugins": [
    "syntax-flow",
    "transform-flow-strip-types",
    ["transform-react-jsx", { "pragma": "h" }]
]}

Что касается Flow, то здесь нет ничего сумасшедшего. Мы просто говорим babel использовать те два плагина и пресет, которые мы установили ранее. Ни один из подключаемых модулей Flow не требует какой-либо конкретной конфигурации, что очень удобно. Нам действительно нужно настроитьtransform-react-jsx, чтобы использовать h в качестве прагмы, что является стандартным для Preact.

Шаг 4 - Настройка потока

Это будет самая сложная часть урока. Вы можете выпить чашку кофе или сделать 10–15 минут на растяжку, прежде чем продолжить. Чтобы заставить Flow работать, нам нужно создать действующий .flowconfig файл. Для начала просто создайте файл в корневом каталоге вашего проекта:

touch .flowconfig

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

Пока мы занимаемся этим, давайте добавим flow скрипт к нашему package.json, чтобы мы могли запустить проверку типов. Мы также добавим build скрипт, чтобы мы могли запускать Webpack.

"scripts": {
  "flow": "flow",
  "build": "webpack"
}

Шаг 5 - Собираем все вместе

Мы закончили настройку! Теперь нам просто нужно создать наше приложение и добавить несколько аннотаций типов, чтобы все заработало. Давайте добавим в src/index.js следующий код:

Обратите внимание на комментарий вверху файла. Если бы у нас этого не было, Flow проигнорировал бы файл. Это одна из самых крутых особенностей: вам не нужно добавлять аннотации типов ко всему проекту сразу, вы можете постепенно добавлять его файл за файлом.

Если мы запустим yarn flow, мы должны получить ошибку, поскольку greeting должно быть числом, но мы передали строку!

$ flow 
src/index.js:14
 14: render(<App greeting="Hello, world"/>, document.getElementById('app'))
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `App`
 14: render(<App greeting="Hello, world"/>, document.getElementById('app'))
                          ^^^^^^^^^^^^^^ string. This type is incompatible with the expected param type of
  5:   greeting: number,
                 ^^^^^^ number

Попробуйте исправить аннотацию типа и снова запустить yarn flow, и он должен работать без каких-либо ошибок.

В заключение

Вот и все! У вас есть рабочий проект Preact с аннотациями типа Flow. Вы можете запустить yarn build, чтобы убедиться, что Webpack также работает. Он должен вывести вашу сборку на public/bundle.js.

Посмотрите это репо, содержащее рабочий пример Preact и Flow. Он был создан с использованием тех же шагов, которые я описал здесь!