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
- это основной код для Babelbabel-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. Он был создан с использованием тех же шагов, которые я описал здесь!