Укрепление сборки React: Часть 2

Мы начинаем с разработки через тестирование с помощью React и заканчиваем статической типизацией с помощью Flow.

Эта статья является частью серии, начинающейся с Укрепление сборки React: Часть 1, в которой рассматриваются решения для создания более поддерживаемых интерфейсных приложений.

Jest and React

Мы следуем документации по включению Jest и React.

yarn add --dev babel-jest react-test-renderer

Поскольку babel-jest использует Babel, нам нужно извлечь конфигурацию Babel, которая находится в webpack.config.js (и удалите там дублирующую конфигурацию).

./.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["syntax-dynamic-import"]
}

Теперь, когда Jest включен для React, мы следуем их примеру, сначала создавая интерактивный компонент React: Link и используя его в нашем приложении React. .

./src/index.jsx

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import sum from './sum';
import Link from './Link';
render(
  <div>
    <div>Hello World</div>
    <div>1 plus 2 equals {sum(1, 2).toString()}</div>
    <Link page="https://www.google.com">Google</Link>
  </div>,
  document.getElementById('root'),
);

Продолжая следовать их примеру, мы создаем тестовый снимок для Link. Актуальный тест.

Опять же, в этой серии статей лишь кратко рассматривается разработка через тестирование с помощью React.

Поток

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

function square(n) {
  return n * n; // Error!
}
square("2");

во время компиляции, а не во время выполнения. По сути, цель статической типизации:

Устали запускать код для поиска ошибок? Flow выявляет проблемы по мере того, как вы пишете код. Перестаньте тратить время на догадки и проверки.

- Команда Flow

Как и многие вещи JavaScript сегодня, Facebook предоставляет решение, которое позволяет статическую типизацию; называется Flow. Он обеспечивает простой переход к статической типизации с помощью JavaScript.

примечание: еще одно популярное, хотя и более сложное решение - TypeScript.

В этой серии статей мы просто включим Flow в процесс сборки, чтобы мы могли использовать его, если решим использовать его позже.

Следуя инструкциям, мы начинаем с установки зависимостей разработки.

yarn add --dev babel-preset-flow flow-bin

примечание: нам не нужен babel-cli (в документации), поскольку мы используем webpack для запуска Babel транспиляция нашего JavaScript.

Нам нужно включить Babel с возможностью обработки дополнительного синтаксиса Flow с обновленным файлом конфигурации Babel.

./.babelrc

{
  "presets": ["es2015", "react", "flow"],
  "plugins": ["syntax-dynamic-import"]
}

Нам также необходимо обновить ESLint для обработки дополнительного синтаксиса Flow с использованием eslint-plugin-flowtype, добавив следующие дополнительные зависимости разработки.

yarn add --dev babel-eslint eslint-plugin-flowtype

Нам нужно обновить конфигурацию ESLint следующим образом:

./.eslintrc

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jest/globals": true
  },
  "extends": [
    "airbnb",
    "plugin:jest/recommended",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "jest", "flowtype"
  ]
}

примечание: babel-eslint используется в качестве синтаксического анализатора ESLint по умолчанию, который не может обрабатывать синтаксис Flow.

Наконец, мы инициализируем Flow, введя:

yarn run flow init

Flow работает путем запуска отдельной службы для вашего исходного кода; начато:

yarn run flow

и остановился с

yarn run flow stop

Стандартный (и утомительный) механизм получения отчета об ошибках - запустить команду

yarn run flow status

Однако пакет flow-status-webpack -plugin позволяет webpack сначала запускаться, а затем автоматически сообщать о статусе Flow для каждой сборки :

yarn add --dev flow-status-webpack-plugin

И обновление:

./webpack.config.js

...
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');
...
    new BundleAnalyzerPlugin(),
    new FlowStatusWebpackPlugin({
      failOnError: true,
    }),
  ],

Со всем этим мы можем использовать Flow.

./src/sum.js

// @flow
function sum(a: number, b: number): number {
  return a + b;
}
module.exports = sum;

примечание: Facebook предоставляет расширение (Nuclide) для редактора Atom, которое поддерживает отображение Flow статус в редакторе.

Подведение итогов

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

Хотя это может быть банально, я не мог удержаться от напоминания себе, что «это не JavaScript твоего отца».