В постоянно развивающихся усилиях по написанию поддерживаемых интерфейсных приложений мы исследуем ряд технологий, позволяющих вам писать лучший код JavaScript (в контексте React). .
Между прочим, сначала вам нужно знать веб-пакет
Интересно то, что многие из моих коллег, которые используют новейшие инструменты разработки, уклоняются от изучения инструмента сборки webpack в пользу использования более простых инструментов сборки, таких как create-react-app (которые, кстати, используют webpack под капотом). Я предполагаю, что они еще не пришли к выводу, что управление процессом сборки является критически важной частью современной интерфейсной разработки.
Однако проблема заключается в том, что webpack (и дополнительные библиотеки к нему) - невероятно мощный и сложный инструмент. Если вы заинтересованы в полном понимании разработанной здесь конфигурации webpack, я написал ряд статей, которые помогут.
Внедрение поддержки React в сборку
Начиная с конфигурации, не связанной с React webpack (вывод статей), мы добавляем одну зависимость разработки и конфигурацию webpack строки для поддержки React.
yarn add --dev babel-preset-react
./src/webpack.config.js
...
module.exports = function(env) {
return ({
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: env === 'production' ? 'source-map' : 'cheap-eval-source-map',
entry: './src/index.jsx',
output: {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
plugins: ['syntax-dynamic-import'],
},
Написание приложения Simple React
Сначала нам нужно добавить зависимости в проект.
yarn add react react-dom
Затем мы обновляем папку src, чтобы получить единственный файл:
./src/index.jsx
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
render(
<div>Hello React</div>,
document.getElementById('root'),
);
На данный момент у нас есть полностью работающее приложение React и процесс сборки.
Конфигурация ESLint
В то время как транспилятор Babel перехватывает множество ошибок JavaScript, популярная конфигурация Airbnb ESLint также требует особенно строгого стиля. Я просто следовал их инструкциям (они зависят от ОС, поэтому я не перечислял их здесь), чтобы установить зависимости разработки, за которыми следовала команда
yarn install
чтобы зафиксировать эти изменения в конфигурации Yarn.
Также нам нужен файл конфигурации ESLint.
./.eslintrc
{
"env": {
"browser": true
},
"extends": "airbnb"
}
Имея это на месте, мы можем вручную запустить команду lint вручную из корневой папки проекта:
yarn run eslint src/**
примечание. Эта команда запуска пряжи эквивалентна:
./node_modules/.bin/eslint src/**
примечание: мы также можем настроить наш редактор, например, Atom, для использования этой конфигурации линтинга, например, мы можем установить плагины Atom linter-eslint и Реагировать.
Проблема, однако, в том, что наш процесс сборки webpack ничего из этого не использует.
ESLint и веб-пакет
Мы можем использовать eslint-loader для включения ESLint в наш процесс сборки webpack, установив зависимость разработки и обновив наш webpack конфигурация со строгой конфигурацией.
yarn add --dev eslint-loader
./webpack.config.js
...
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
failOnWarning: true,
failOnError: true,
},
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
...
Проведение тестирования шутки
Хотя мне еще предстоит освоить разработку через тестирование (TDD), я считаю это естественным следующим шагом к усилению процесса разработки. Рисунок, мне нужно было минимально активировать инфраструктуру тестирования, когда я действительно хочу ее использовать.
Учитывая, что Jest написан Facebook и специально ориентирован на React, это естественная среда тестирования для этих усилий. Добавить его так же просто, как установить его как зависимость для разработки.
yarn add --dev jest
В то же время, чтобы предотвратить создание ESLint ошибок из тестов, нам необходимо дополнительно установить другую зависимость разработки.
yarn add --dev eslint-plugin-jest
И обновить файл конфигурации ESLint.
./.eslintrc
{
"env": {
"browser": true,
"jest/globals": true
},
"extends": [
"airbnb",
"plugin:jest/recommended"
],
"plugins": [
"jest"
]
}
Дополнительно нам необходимо обновить:
./package.json
..
"scripts": {
"build": "./node_modules/.bin/webpack -p --env production",
"start": "./node_modules/.bin/webpack-dev-server --open",
"start-production": "./node_modules/.bin/webpack-dev-server --env production --open",
"test": "jest"
},
...
Теперь, когда все это готово, мы можем написать простой модуль с тестом:
./src/sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
./src/__tests__/sum.test.js
const sum = require('../sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
и выполните его, запустив следующее из корня проекта.
yarn test
Проблема, однако, в том, что наша текущая конфигурация Jest не знает о ES2015 или React в этом отношении; практически бесполезен для тестирования кода React.
Дальнейшие действия
Мы продолжаем укреплять наш процесс сборки React с помощью React удобного Jest тестирования в Повышение безопасности сборки React: Часть 2 .
