Слияние кода завершено, страница обновится автоматически
Этот проект был создан с помощью Create React App.
Ниже приведена информация о выполнении обычных задач.
Вы можете найти самую последнюю версию этого руководства здесь.## Содержание
<title>public
<meta> на сервереjsdomcreate-react-app — это глобальная утилита командной строки, которую вы используете для создания новых проектов.react-scripts — это зависимость от среды разработки в сгенерированных проектах (включая этот).Вы почти никогда не будете нуждаться в обновлении самого create-react-app: он делегирует все настройки на react-scripts.
Когда вы запускаете create-react-app, он всегда создаёт проект с последней версией react-scripts, поэтому новые приложения автоматически получают все новые возможности и улучшения.
Чтобы обновить существующий проект до новой версии react-scripts, откройте журнал изменений, найдите версию, которая используется вами сейчас (проверьте package.json в этой папке, если вы не уверены), и примените инструкции по миграции для более новых версий.
В большинстве случаев увеличение версии react-scripts в package.json и выполнение npm install в этой папке должно быть достаточно, но полезно также проконсультироваться со журналом изменений для возможных разрушительных изменений.
Мы обязуемся сохранять разрушительные изменения минимальными, чтобы вы могли обновлять react-scripts безболезненно.
Мы всегда открыты для ваших отзывов.## Структура папок
После создания ваш проект должен иметь следующую структуру:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Для сборки проекта эти файлы должны существовать с точно такими же названиями:
public/index.html — это шаблон страницы;src/index.js — это входная точка JavaScript.Вы можете удалить или переименовать остальные файлы.
Вы можете создавать подпапки внутри src. Для быстрого перестроения только файлы внутри src обрабатываются Webpack'ом.
Вы должны поместить любые файлы JavaScript и CSS внутрь src, иначе Webpack этого не заметит.
Только файлы внутри public могут использоваться из public/index.html.
Прочитайте ниже указания по использованию активов из JavaScript и HTML.
Вы можете, однако, создавать новые верхнеуровневые директории.
Они не будут включены в производственную сборку, поэтому вы можете использовать их для таких вещей как документация.
В директории проекта вы можете запустить:
npm start
Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница будет перезагружаться при каждом изменении.
Вы также увидите ошибки проверки синтаксиса (lint) в консоли.
npm test
Запускает тестовый запускатель в интерактивном режиме отслеживания.
Чтобы узнать больше информации о запуске тестов.### npm run build
Создает приложение для продакшена в папке build.
Он правильно собирает React в режиме продакшена и оптимизирует сборку для наилучшей производительности.
Сборка минифицирована, а названия файлов содержат хэши. Ваше приложение готово к развёртыванию!
Дополнительную информацию можно найти в разделе о развёртывании.
npm run eject
Обратите внимание: это односторонняя операция. После выполнения команды eject вернуться назад нельзя!
Если вы недовольны выбором средств сборки и конфигураций, вы можете выполнить eject в любое время. Эта команда удалит единственную зависимость сборки из вашего проекта.
Вместо этого она скопирует все конфигурационные файлы и транзитивные зависимости (Webpack, Babel, ESLint и т.д.) прямо в ваш проект, чтобы вы имели полный контроль над ними. Все команды кроме eject продолжат работать, но они будут указывать на скопированные скрипты, поэтому вы сможете их настроить. В этот момент вы уже сами себе хозяева.
Вы не обязаны использовать команду eject. Подобранный набор функций подходит для малых и средних развертываний, и вы не должны чувствовать себя обязанным использовать эту функцию. Однако мы понимаем, что эта утилита была бы бесполезной, если бы вы не могли её настроить, когда вам это потребуется.## Поддерживаемые браузеры
По умолчанию, созданный проект использует последнюю версию React.
Дополнительную информацию о поддерживаемых браузерах можно найти в документации React.
Этот проект поддерживает множество последних стандартов JavaScript.
Кроме синтаксических возможностей ES6, он также поддерживает:
Узнайте больше о различных этапах рассмотрения предложений.
Хотя мы рекомендуем использовать экспериментальные предложения с некоторой осторожностью, Facebook активно использует эти возможности в продукт-коде, поэтому мы намерены предоставлять codemods, если какие-либо из этих предложений изменятся в будущем.Обратите внимание, что проект включает лишь несколько полифиллов ES6:
Object.assign() через object-assign.Promise через promise.fetch() через whatwg-fetch.Если вы используете любые другие возможности ES6+, требующие поддержки во время выполнения (например, Array.from() или Symbol), убедитесь, что вы вручную добавили соответствующие полифиллы или что браузеры, которые вы целевым образом выбираете, уже поддерживают их.
Также обратите внимание, что использование некоторых новых синтаксических возможностей, таких как for...of или [...nonArrayValue], заставляет Babel генерировать код, который зависит от возможностей времени выполнения ES6 и может не работать без полифиллов. В случае сомнений используйте Babel REPL, чтобы увидеть, как любой конкретный синтаксис компилируется.
Чтобы настроить выделение синтаксиса в вашем любимом текстовом редакторе, перейдите на страницу соответствующей документации Babel и следуйте инструкциям. Некоторые из самых популярных редакторов включены.
react-scripts@0.2.0 и выше.Она также работает только с npm 3 или выше.
Некоторые редакторы, включая Sublime Text, Atom и Visual Studio Code, предлагают плагины для ESLint.
Они не обязательны для проверки правильности. Вы должны видеть вывод линтера прямо в терминале и в консоли браузера. Однако, если вам предпочитаются результаты проверки правильности, отображаемые непосредственно в вашем редакторе, есть некоторые дополнительные шаги, которые можно выполнить.
Сначала вам потребуется установить плагин ESLint для вашего редактора. Затем добавьте файл под названием .eslintrc в корень проекта:
{
"extends": "react-app"
}
Теперь ваш редактор должен отображать предупреждения проверки стилей.
Обратите внимание, что даже если вы будете продолжать редактировать свой файл .eslintrc, эти изменения будут влиять только на интеграцию с редактором. Они не повлияют на терминал и вывод проверки в браузере. Это связано с тем, что Create React App предоставляет минимальное количество правил, чтобы найти общие ошибки.
Если вам требуется применение определенного стиля программирования для вашего проекта, рассмотрите возможность использования Prettier вместо правил стиля ESLint.
**Эта функция в настоящее время поддерживается только Visual Studio Code и WebStorm.**Visual Studio Code и WebStorm поддерживают отладку прямо из коробки с использованием Create React App. Это позволяет вам как разработчику писать и отлаживать свой код React без необходимости выходить за рамки редактора, а также обеспечивает непрерывный процесс разработки, где минимизируется переход между различными инструментами.
Для этого вам потребуется последняя версия VS Code и расширение VS Code Chrome Debugger Extension.
Затем добавьте следующий блок в ваш файл launch.json и поместите его внутрь папки .vscode в корневой директории вашего приложения.
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
Примечание: URL может отличаться, если вы сделали какие-либо изменения через переменные окружения HOST или PORT.
Запустите ваше приложение командой npm start, затем запустите отладку в VS Code, нажав клавишу F5 или щелкнув зелёную кнопку отладки. Теперь вы можете писать код, устанавливать точки останова, делать изменения в коде и отлаживать модифицированный код — всё это прямо из вашего редактора.
Имеете проблемы с отладкой в VS Code? Пожалуйста, обратитесь к их руководству по устранению неполадок.
В меню WebStorm выберите Run -> Edit Configurations.... Затем нажмите + и выберите JavaScript Debug. Введите http://localhost:3000 в поле URL и сохраните конфигурацию.
Примечание: URL может отличаться, если вы сделали изменения через переменные окружения HOST или PORT.
Запустите ваше приложение командой npm start, затем нажмите ^D на macOS или F9 на Windows и Linux, либо кликните зелёную кнопку отладки, чтобы начать отладку в WebStorm.
То же самое можно сделать для отладки вашего приложения в IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro и RubyMine.
Prettier — это мнемонический форматтер кода с поддержкой JavaScript, CSS и JSON. С помощью Prettier вы можете автоматически форматировать код, который пишете, чтобы обеспечить единый стиль кода внутри проекта. Подробнее см. страницу Prettier на GitHub и этот пример его использования.
Чтобы форматировать наш код каждый раз при создании коммита в Git, нам нужно установить следующие зависимости:
npm install --save husky lint-staged prettier
Альтернативно вы можете использовать yarn:
yarn add husky lint-staged prettier
```* `husky` делает использование гитхуков простым, как использование скриптов npm.
* `lint-staged` позволяет запускать скрипты на закомиченных файлах в Git. Подробнее см. этот [блог о lint-staged](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
* `prettier` — это форматтер JavaScript, который мы будем запускать перед коммитами.Теперь мы можем убедиться, что все файлы правильно оформлены, добавив несколько строк в `package.json` в корне проекта.
Добавьте следующую строку в раздел `scripts`:
```diff
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",
Затем добавьте поле lint-staged в package.json, например:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": {
Теперь каждый раз, когда вы делаете коммит, Prettier будет автоматически форматировать измененные файлы. Вы также можете запустить команду ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}", чтобы сформатировать весь проект в первый раз.
Далее вы можете интегрировать Prettier в свой любимый редактор. Прочитайте раздел о интеграции с редакторами на странице Prettier в GitHub.
<title>
Исходный HTML-файл можно найти в папке public сгенерированного проекта. Вы можете отредактировать тег <title>, чтобы изменить заголовок с «React App» на любой другой.
Обратите внимание, что обычно вы не будете часто редактировать файлы в папке public. Например, добавление стилистики выполняется без изменения HTML.Если вам нужно динамически обновлять заголовок страницы в зависимости от содержимого, вы можете использовать браузерную API [document.title](https://developer.mozilla.org/en-US/docs/Web/API/Document/title). Для более сложных случаев, когда вы хотите изменять заголовок через компоненты React, вы можете использовать React Helmet, стороннюю библиотеку.Если вы используете кастомный сервер для вашего приложения в продакшене и хотите изменить заголовок до отправки его в браузер, вы можете следовать советам в этом разделе [динамическое генерирование метатегов на сервере]. В качестве альтернативы, вы можете предварительно создать каждую страницу как статический HTML-файл, который затем загружает JavaScript-пакет, что описано здесь [предварительное рендериование в статических HTML-файлах].
Созданный проект уже включает React и ReactDOM как зависимости. Также он включает набор скриптов, используемых Create React App в качестве зависимостей разработки. Вы можете установить другие зависимости (например, React Router) с помощью npm:
npm install --save react-router
Альтернативно вы можете использовать yarn:
yarn add react-router
Это работает для любого другого пакета, а не только react-router.
Эта конфигурация проекта поддерживает модули ES6 благодаря Babel.
Хотя вы всё ещё можете использовать require() и module.exports, мы рекомендуем использовать вместо этого ключевые слова import и export.
Например:
Button.js
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Не забудьте использовать export default!
DangerButton.js
import React, { Component } from 'react';
import Button from './Button'; // Импортирование компонента из другого файла
``````jsx
class DangerButton extends Component {
render() {
return <Button color="красный" />;
}
}
export default DangerButton;
Обратите внимание на различие между дефолтными и именованными экспортомами. Это распространенный источник ошибок.
Мы рекомендуем придерживаться использования дефолтных импортов и экспортов, когда модуль экспортирует всего одну вещь (например, компонент). Именно это вы получаете, используя export default Button и import Button from './Button'.
Именованные экспорты полезны для модулей с несколькими функциями. В одном модуле может быть только один дефолтный экспорт и сколько угодно именованных экспортов.
Узнайте больше о модулях ES6:
Вместо загрузки всего приложения перед тем как пользователи смогут его использовать, разделение кода позволяет вам разбить свой код на небольшие части, которые затем можно загружать по мере необходимости.Эта конфигурация проекта поддерживает разделение кода через динамическое import(). Его предложение находится в стадии 3. Функциональная форма import() принимает имя модуля в качестве аргумента и возвращает объект Promise, который всегда выполняется до пространства имен модуля.Пример:
moduleA.js
const moduleA = 'Привет';
export { moduleA };
App.js
import React, { Component } from 'react';
class App extends Component {
handleClick = () => {
import('./moduleA')
.then(({ moduleA }) => {
// Используйте moduleA
})
.catch(err => {
// Обработайте ошибку
});
};
}
Для этого вам потребуется использовать метод import() в ваших компонентах React. Это позволит выделить модуль moduleA.js вместе со всеми его уникальными зависимостями в отдельный чанк, который будет загружаться только после нажатия кнопки "Загрузить".
Вы также можете использовать этот подход с синтаксисом async / await, если вам это удобнее.
Если вы используете React Router, обратитесь к этому руководству для использования разделения кода с ним. Вы можете найти сопутствующий репозиторий GitHub здесь.
Также рекомендуется ознакомиться с разделом Code Splitting в документации React.
Эта конфигурация проекта использует Webpack для управления всеми активами. Webpack предлагает специальный способ "расширения" понятия import за рамки JavaScript. Чтобы указать, что файл JavaScript зависит от файла CSS, вам нужно импортировать CSS прямо из файла JavaScript:### Кнопка.css
.кнопка {
padding: 20px;
}
Кнопка.js
import React, { Component } from 'react';
import './кнопка.css'; // Уведомляем Webpack, что кнопка.js использует эти стили
class Кнопка extends Component {
render() {
return <div className="кнопка" />;
}
}
Это не обязательно для React, но многие люди находят эту возможность удобной. Однако стоит отметить, что это делает ваш код менее переносимым в другие системы сборки и среды, отличные от Webpack.
В режиме разработки такое представление зависимости позволяет автоматически перезагружать ваши стили при каждом изменении. В продакшне все CSS файлы будут объединены в один минифицированный .css файл в выходных данных сборки.
Если вас беспокоит использование семантики, специфичной для Webpack, вы можете поместить все свои CSS прямо в src/index.css. Этот файл всё равно будет импортироваться из src/index.js, но вы всегда сможете удалить этот импорт, если позднее перейдёте на другой инструмент сборки.
Этот проект автоматически минифицирует ваш CSS и добавляет префиксы производителя через Autoprefixer, поэтому вам не нужно беспокоиться об этом.
Например, этот CSS:
.Апп {
display: flex;
flex-direction: row;
align-items: center;
}
становится таким:
.Апп {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
```Если вы хотите отключить автопрефексацию по какой-либо причине, [следуйте этому разделу](https://github.com/postcss/autoprefixer#disabling).
## Добавление препроцессора CSS (Sass, Less и т.д.)
Общее правило состоит в том, чтобы не переиспользовать одни и те же CSS-классы между различными компонентами. Например, вместо использования класса CSS `.Button` в компонентах `<AcceptButton>` и `<RejectButton>`, рекомендуется создать компонент `<Button>` со своими собственными стилями `.Button`, который могут использовать как `<AcceptButton>`, так и `<RejectButton>` (но [не наследовать](https://ru.reactjs.org/docs/composition-vs-inheritance.html)).
Следование этому правилу часто делает препроцессоры CSS менее полезными, поскольку возможности, такие как миксины и вложенность, заменяются композицией компонентов. Однако вы можете интегрировать препроцессор CSS, если считаете это ценным. В этом руководстве мы будем использовать Sass, но вы также можете использовать Less или другой альтернативный вариант.
Сначала установите командную строку для Sass:
```sh
npm install --save node-sass-chokidar
Альтернативно можно использовать yarn:
yarn add node-sass-chokidar
Затем в файле package.json добавьте следующие строки в секцию scripts:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ cq "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
```> Примечание: Чтобы использовать другой препроцессор, замените команды `build-css` и `watch-css` согласно документации вашего препроцессора. Теперь вы можете переименовать `src/App.css` в `src/App.scss` и запустить `npm run watch-css`. Наблюдатель найдёт каждый файл Sass в подкаталогах `src`, а также создаст соответствующий ему CSS-файл рядом с ним, в данном случае перезаписывая `src/App.css`. Поскольку `src/App.js` всё ещё импортирует `src/App.css`, стили становятся частью вашего приложения. Вы теперь можете редактировать `src/App.scss`, и `src/App.css` будет перегенерирован. Для того чтобы делиться переменными между файлами Sass, вы можете использовать импорты Sass. Например, файл `src/App.scss` и другие файлы стилей компонентов могут включать `@import "./shared.scss";` с определением переменных.
Для включения возможности импорта файлов без использования относительных путей можно добавить опцию `--include-path` к команде в `package.json`.
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Это позволит вам выполнять импорты следующим образом:
```scss
@import 'styles/_colors.scss'; // предполагается наличие директории styles под src/
@import 'nprogress/nprogress'; // импорт файла CSS из модуля nprogress
```На этом этапе может потребоваться удаление всех файлов CSS из системы контроля версий и добавление `src/**/*.css` в ваш файл `.gitignore`. Общепринятой практикой является хранение результатов сборки вне системы контроля версий.Как окончательный шаг, возможно, будет удобно автоматически запускать `watch-css` при выполнении `npm start`, а также выполнять `build-css` как часть `npm run build`. Вы можете использовать оператор `&&` для выполнения двух скриптов последовательно. Однако нет универсального способа запуска двух скриптов параллельно, поэтому мы установим пакет для этого:
```sh
npm install --save npm-run-all
Альтернативно вы можете использовать yarn:
yarn add npm-run-all
Затем мы можем изменить скрипты start и build для включения команд препроцессора CSS:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Теперь выполнение npm start и npm run build также выполняет сборку файлов Sass.
Почему node-sass-chokidar?
node-sass был отмечен следующими проблемами:
node-sass --watch был отмечен как имеющий проблемы с производительностью в некоторых условиях при использовании в виртуальной машине или с Docker.
Бесконечное компилирование стилей [#1939].
node-sass был отмечен как имеющий проблемы с обнаружением новых файлов в директории [#1891]. node-sass-chokidar используется здесь, так как он решает эти проблемы.
С использованием Webpack использование статических активов, таких как изображения и шрифты, работает аналогично CSS.
Вы можете import файл прямо в модуль JavaScript. Это говорит Webpack включить этот файл в пакет. В отличие от импорта CSS, импорт файла предоставляет вам строковое значение пути. Этот путь можно использовать в вашем коде, например, как атрибут src изображения или href ссылки на PDF.
Чтобы снизить количество запросов к серверу, импорт изображений размером менее 10 000 байт возвращает data URI вместо пути. Это применимо к следующим расширениям файлов: bmp, gif, jpg, jpeg и png. Файлы SVG исключены из-за #1153.
Пример:
import React from 'react';
import logo from './logo.png'; // Уведомляем Webpack, что данный JS-файл использует это изображение
console.log(logo); // /logo.84287d09.png
function Header() {
// Результат импорта — это конечный путь вашего изображения
return <img src={logo} alt="Логотип" />;
}
export default Header;
Это гарантирует, что при сборке проекта Webpack правильно переместит изображения в каталог сборки и предоставит нам правильные пути.
Аналогичная ситуация происходит и в CSS:
.Logo {
background-image: url(./logo.png);
}
```Webpack находит все относительные ссылки модулей в CSS (они начинаются с `./`) и заменяет их конечными путями из собранного пакета. Если вы допустите опечатку или случайно удалите важный файл, вы получите ошибку компиляции, точно так же, как если бы вы импортировали несуществующий JavaScript-модуль. Конечные названия файлов в собранном пакете генерируются Webpack на основе хэша содержимого. Если содержимое файла изменится в будущем, Webpack присвоит ему другое имя в продакционной среде, поэтому вам не придётся беспокоиться о долгосрочном кэшировании активов.Пожалуйста, обратите внимание, что это также является специальным свойством Webpack. **Не требуется для React**, но многие люди это любят (и React Native использует аналогичный механизм для изображений).
Альтернативный способ обработки статических активов описан в следующем разделе.
## Использование папки `public`
> Примечание: эта функция доступна с версией `react-scripts@0.5.0` и выше.
### Изменение HTML
Папка `public` содержит HTML-файл, который можно отредактировать, например, чтобы [установить заголовок страницы](#изменение-заголовка-страницы).
Тег `<script>` с скомпилированным кодом будет автоматически добавлен к нему во время процесса сборки.
### Добавление активов вне системы модулей
Вы также можете добавить другие активы в папку `public`.
Обратите внимание, что мы обычно рекомендуем использовать `import` для активов в файлах JavaScript.
Дополнительные сведения см. в разделах [добавление стилей](#добавление-стилей) и [добавление изображений, шрифтов и файлов](#добавление-изображений-шрифтов-и-файлов).
Эта механика предоставляет ряд преимуществ:
* Скрипты и стили минифицируются и объединяются вместе, чтобы избежать лишних сетевых запросов.
* Отсутствие файлов приводит к ошибкам компиляции вместо ошибок 404 для ваших пользователей.
* Названия выходных файлов содержат хэши контента, поэтому вам не нужно беспокоиться о том, что браузеры используют старые версии.Однако существует **выходной канал**, который вы можете использовать, чтобы добавить актив вне системы модулей.
Если вы поместите файл в папку `public`, он **не** будет обрабатываться Webpack'ом. Вместо этого он будет скопирован в папку сборки без изменений. Чтобы ссылаться на активы в папке `public`, вам потребуется специальная переменная `PUBLIC_URL`.
Внутри `index.html` вы можете использовать её так:
```html
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Только файлы внутри папки public будут доступны через префикс %PUBLIC_URL%. Если вам нужно использовать файл из src или node_modules, вам придётся скопировать его туда, чтобы явно указать ваше намерение сделать этот файл частью сборки.
Когда вы запустите npm run build, Create React App заменит %PUBLIC_URL% на правильный абсолютный путь, чтобы ваш проект работал даже если вы используете клиентскую маршрутизацию или размещаете его на неразрешённом URL.
В JavaScript-коде вы можете использовать process.env.PUBLIC_URL для аналогичных целей:
render() {
// Примечание: это выходной канал и следует использовать его крайне редко!
// Обычно мы рекомендуем использовать `import` для получения URL активов,
// как указано в "Добавлении изображений и шрифтов" выше этого раздела.
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
Учитывайте недостатки этого подхода:* Никакие файлы в папке public не проходят этап постредактирования или минификации.
public
Обычно мы рекомендуем импортировать стили, изображения и шрифты с помощью JavaScript.
Папка public полезна как обходной путь для множества менее распространённых случаев:
manifest.webmanifest.pace.js, вне объединенного кода.<script>.Обратите внимание, что если вы добавите <script>, который объявляет глобальные переменные, вам также потребуется прочитать следующий раздел о том, как использовать эти переменные.
Когда вы включаете скрипт в HTML-файл, который определяет глобальные переменные, а затем пытаетесь использовать одну из этих переменных в коде, линтер будет жаловаться, так как он не видит определение переменной.
Вы можете избежать этого явным образом считыванием глобальной переменной из объекта window, например:
const $ = window.$;
```Альтернативно, вы можете заставить линтер игнорировать любую строку, добавив `// eslint-disable-line` после неё.
## Добавление Bootstrap
Вы не обязаны использовать [React Bootstrap](https://react-bootstrap.github.io) вместе с React, но это популярная библиотека для интеграции Bootstrap с React-приложениями. Если вам нужна эта библиотека, вы можете интегрировать её с Create React App, следуя этим шагам:
Установите React Bootstrap и Bootstrap через npm. React Bootstrap не включает CSS Bootstrap, поэтому его тоже следует установить:
```sh
npm install --save react-bootstrap bootstrap@3
Альтернативно, вы можете использовать yarn:
yarn add react-bootstrap bootstrap@3
Импортируйте CSS Bootstrap и, при необходимости, CSS темы Bootstrap в начале файла src/index.js:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
// Расположите любые другие импорты ниже, чтобы CSS из ваших компонентов преобладал над дефолтными стилями.
Импортируйте необходимые компоненты React Bootstrap в файл src/App.js или ваши собственные файлы компонентов:
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
Теперь вы готовы использовать импортированные компоненты React Bootstrap внутри вашей иерархии компонентов, определённой в методе render. Вот пример файла App.js, переработанного с использованием React Bootstrap.
Мы рекомендуем следующий подход:
Вот пример добавления пользовательского Bootstrap, который следует этим шагам.
Flow — это статический анализатор типов, который помогает писать код с меньшим количеством ошибок. Ознакомьтесь с этой введением в использование статических типов в JavaScript, если вы новичок в этом понятии.
Недавние версии Flow работают с проектами Create React App из коробки.
Чтобы добавить Flow в проект Create React App, выполните следующие шаги:1. Выполните команду npm install --save flow-bin (или yarn add flow-bin).
2. Добавьте "flow": "flow" в раздел scripts файла package.json.
3. Выполните команду npm run flow init (или yarn flow init), чтобы создать файл .flowconfig в корневой директории.
4. Добавьте //@flow в любой файл, который вы хотите проверять на наличие типов (например, в src/App.js). Теперь вы можете запустить npm run flow (или yarn flow) для проверки файлов на наличие ошибок типизации.
По желанию можно использовать среду разработки, такую как Nuclide, для более интегрированного опыта.
В будущем мы планируем ещё ближе интегрировать это в Create React App. Чтобы узнать больше о Flow, обратитесь к его документации.## Добавление маршрутизатора
Создание приложения Create React App не пропагандирует конкретное решение для маршрутизации, но React Router является наиболее популярным.
Чтобы добавить его, выполните команду:
npm install --save react-router-dom
Альтернативно вы можете использовать yarn:
yarn add react-router-dom
Чтобы попробовать это, удалите весь код в src/App.js и замените его любым из примеров на сайте. Пример с базовым использованием (Basic Example) — хорошее место для начала.
Обратите внимание, что вам может потребоваться настроить ваш сервер для поддержки клиентской маршрутизации перед развертыванием вашего приложения.
Примечание: эта функция доступна с версией
react-scripts@0.2.3и выше.
Ваш проект может использовать переменные окружения, объявленные в вашем окружении, как если бы они были объявлены локально в ваших файлах JavaScript. По умолчанию у вас будет определена переменная NODE_ENV, а также любые другие переменные окружения, начинающиеся с REACT_APP_.Переменные окружения внедряются во время сборки. Поскольку Create React App создает статический HTML/CSS/JS пакет, он не может прочитать их во время выполнения. Чтобы прочитать их во время выполнения, вам потребуется загрузить HTML в память на сервере и заменить плейсхолдеры во время выполнения, как описано здесь. В качестве альтернативы можно заново собирать приложение на сервере каждый раз, когда изменяются эти переменные.>Примечание: Вы должны создать пользовательские переменные окружения, начинающиеся с REACT_APP_. Любые другие переменные, кроме NODE_ENV, будут проигнорированы, чтобы избежать случайного предоставления закрытого ключа на машине, которая может иметь такое же имя. Изменение любой переменной окружения потребует перезапуска сервера разработки, если он запущен.
Эти переменные окружения будут определены для вас в process.env. Например, имеющаяся переменная окружения REACT_APP_SECRET_CODE будет доступна в вашем JS как process.env.REACT_APP_SECRET_CODE. Также есть специальная встроенная переменная окружения с названием NODE_ENV. Вы можете прочитать её значение через process.env.NODE_ENV. Когда вы запускаете npm start, она всегда равна 'development', когда запускаете npm test — всегда равна 'test', а при запуске npm run build для создания продакшн сборки — всегда равна 'production'. Переменную NODE_ENV нельзя переопределить вручную. Это предотвращает возможность случайной отправки медленной версии сборки для разработки в продакшн. Эти переменные окружения могут быть полезны для условного отображения информации в зависимости от того, где проект был развернут, или для использования чувствительных данных, хранящихся вне системы контроля версий.Сначала вам потребуется определить переменные окружения. Например, предположим, что вы хотите использовать секрет, определённый в окружении, внутри <form>:
render() {
return (
<div>
<small>Вы запускаете это приложение в режиме <b>{process.env.NODE_ENV}</b>.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
</form>
</div>
);
}
При сборке process.env.REACT_APP_SECRET_CODE будет заменено текущим значением переменной окружения REACT_APP_SECRET_CODE. Вспомните, что переменная NODE_ENV автоматически установлена для вас.
Когда вы загрузите приложение в браузере и проверите <input>, вы увидите, что его значение установлено как abcdef, а жирный текст покажет среду, предоставляемую при использовании npm start:
<div>
<small>Вы запускаете это приложение в режиме <b>development</b>.</small>
<form>
<input type="hidden" value="abcdef" />
</form>
</div>
Вышеуказанный <form> ищет переменную с именем REACT_APP_SECRET_CODE из окружения. Чтобы использовать это значение, нам нужно определить её в окружении. Это можно сделать двумя способами: либо в вашей оболочке, либо в файле .env. Оба эти метода описаны ниже.
Доступ к переменной NODE_ENV также полезен для выполнения действий условно:
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
При компиляции приложения командой npm run build шаг минификации удалит эту проверку условия, и получившийся пакет будет меньше.### Указание переменных окружения в HTML
Примечание: эта возможность доступна с
react-scripts@0.9.0и выше.
Вы также можете получить доступ к переменным окружения, начинающимся с REACT_APP_, в public/index.html. Например:
<title>%REACT_APP_WEBSITE_NAME%</title>
Обратите внимание, что применимы те же ограничения, что и выше:
NODE_ENV и PUBLIC_URL), имена переменных должны начинаться с REACT_APP_, чтобы работали.Определение переменных окружения может различаться между операционными системами. Важно знать, что этот способ является временным для всего срока работы сессии оболочки.
set "REACT_APP_SECRET_CODE=abcdef" && npm start
(Примечание: Кавычки вокруг присвоения переменной обязательны для избежания пробела в конце строки.)
($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start)
REACT_APP_SECRET_CODE=abcdef npm start
Примечание: данная возможность доступна при использовании
react-scripts@0.5.0и выше.
Чтобы определить постоянные переменные окружения, создайте файл с названием .env в корне вашего проекта:```
REACT_APP_SECRET_CODE=abcdef
> Примечание: Вам следует создать пользовательские переменные окружения, начинающиеся с `REACT_APP_`. Все остальные переменные, кроме `NODE_ENV`, будут игнорироваться для предотвращения случайного раскрытия личного ключа на машине, которая может иметь такое же имя. Изменение любой переменной окружения потребует перезапуска сервера разработки, если он запущен.
Файлы `.env` **должны** быть добавлены в систему контроля версий (с исключением файлов `.env*.local`).
#### Какие ещё файлы .env могут быть использованы?
> Примечание: данная возможность доступна при использовании `react-scripts@1.0.0` и выше.
* `.env`: По умолчанию.
* `.env.local`: Локальные переопределения. **Этот файл загружается для всех сред, кроме тестовой.**
* `.env.development`, `.env.test`, `.env.production`: Окружение-специфические настройки.
* `.env.development.local`, `.env.test.local`, `.env.production.local`: Локальные переопределения окружение-специфических настроек.
Файлы слева имеют более высокий приоритет, чем файлы справа:
* `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
* `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
* `npm test`: `.env.test.local`, `.env.test`, `.env` (заметьте отсутствие `.env.local`)Эти переменные будут служить значениями по умолчанию, если машина явно не установит их. <br>
Дополнительные детали можно найти в [документации dotenv](https://github.com/motdotla/dotenv).
**Примечание:** если вы определяете переменные окружения для разработки, ваш CI и/или платформа хостинга, скорее всего, также потребуют этих переменных быть определёнными. Обратитесь к их документации для получения информации о том, как это сделать. Например, см. документацию для [Travis CI](https://docs.travis-ci.com/user/environment-variables/) или [Heroku](https://devcenter.heroku.com/articles/config-vars).#### Раскрытие переменных окружения в файле .env
>Примечание: данная функциональность доступна начиная с версии `react-scripts@1.1.0`.
Раскройте уже существующие переменные окружения на вашем компьютере для использования в файле .env (используя [dotenv-expand](https://github.com/motdotla/dotenv-expand)).
Например, чтобы получить переменную окружения `npm_package_version`:
```bash
REACT_APP_VERSION=$npm_package_version
# также работает:
# REACT_APP_VERSION=${npm_package_version}
Или раскройте переменные, локальные для текущего файла .env:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Многие популярные библиотеки используют декораторы в своей документации.
Создание React App в настоящее время не поддерживает синтаксис декораторов, поскольку:
Однако во многих случаях можно переписать код на основе декораторов без использования декораторов.
Для справки обратитесь к следующим темам форума:
Создание React App добавит поддержку декораторов, когда спецификация достигнет стабильной стадии.## Получение данных с помощью запросов AJAX
React не пропагандирует конкретный подход к получению данных, но часто используется либо библиотека типа axios, либо API fetch() предоставляемое браузером. Удобно, что Создание React App включает полифилл для fetch(), поэтому его можно использовать без беспокойства относительно совместимости браузера. Глобальная функция fetch позволяет легко выполнять AJAX-запросы. Она принимает в качестве входных данных URL и возвращает объект Promise, который разрешается до объекта Response. Вы можете найти больше информации о fetch здесь.
Этот проект также включает полифилл Promise, который предоставляет полную реализацию Promises/A+. Объект Promise представляет собой конечный результат асинхронной операции; вы можете найти больше информации о Promises здесь и здесь. Как axios, так и fetch() используют Promises внутри себя. Вы также можете использовать синтаксис async / await, чтобы уменьшить вложенность обратных вызовов.
Вы можете узнать больше о выполнении AJAX-запросов из компонентов React в вопросе часто задаваемых вопросов на сайте React.
fetch() для доступа к нему.Посмотрите этот учебник. Вы можете найти сопутствующий репозиторий GitHub здесь.
Посмотрите этот учебник. Вы можете найти сопутствующий репозиторий GitHub здесь.
Примечание: эта функция доступна с версии
react-scripts@0.2.3.
Часто передний конец React-приложения обслуживается тем же хостом и портом, что и его back-end реализация.
Например, производственная установка может выглядеть следующим образом после развертывания:
/ - статический сервер возвращает index.html с приложением React
/todos - статический сервер возвращает index.html с приложением React
/api/todos - сервер обрабатывает любые запросы /api/* с использованием back-end реализации
Такое расположение не обязательно. Однако если вы имеете такое расположение, удобно выполнять запросы вроде fetch('/api/todos') без необходимости перенаправления их на другой хост или порт во время разработки.
Чтобы указать серверу разработки проксировать все неизвестные запросы к вашему серверу API во время разработки, добавьте поле proxy в ваш package.json, например:js "proxy": "http://localhost:4000", Таким образом, когда вы выполняете запрос fetch('/api/todos') в режиме разработки, сервер разработки распознает, что это не статический ресурс, и переадресует ваш запрос на http://localhost:4000/api/todos как запасной вариант. Сервер разработки будет только пытаться отправлять запросы без text/html в заголовке Accept прокси-серверу.
Конечно, это позволяет избежать проблем с CORS и ошибочных сообщений типа этого в режиме разработки:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Не забывайте, что proxy влияет только в режиме разработки (при выполнении npm start), и вам следует убедиться, что URL-адреса, такие как /api/todos, указывают на правильный ресурс в продакшене. Вы не обязаны использовать префикс /api. Любые нераспознанные запросы без заголовка accept равного text/html будут переадресованы на указанный proxy.
Параметр proxy поддерживает соединения HTTP, HTTPS и WebSocket.
Если параметр proxy недостаточно гибкий для вас, вы можете:
Когда вы активируете параметр proxy, вы соглашаетесь с более строгими проверками хоста. Это необходимо потому, что открытие бэкенд-сервера для удалённых хостов делает ваш компьютер уязвимым к атакам DNS rebinding. Проблема объясняется в этой статье и этом вопросе.
Это не должно повлиять на вас при разработке на localhost, но если вы разрабатываете удаленно, как описано здесь, вы увидите эту ошибку в браузере после активации параметра proxy: > Недействительный заголовок хоста
Чтобы обойти эту проблему, вы можете указать ваш публичный адрес разработки в файле с названием .env.development в корне вашего проекта:
HOST=mypublicdevhost.com
Если теперь перезапустите сервер разработки и загрузите приложение с указанного хоста, всё должно работать.
Если проблемы продолжаются или если вы используете более экзотическую среду, такую как облачный редактор, вы можете полностью обойти проверку хоста, добавив строку в файл .env.development.local. Обратите внимание, что это опасно и делает вашу машину уязвимой для выполнения удалённого кода с сайтов-мошенников:
# ВНИМАНИЕ: ЭТО ОПАСНО!
# Это делает вашу машину уязвимой для атак со стороны сайтов, которые вы посещаете.
DANGEROUSLY_DISABLE_HOST_CHECK=true
```Мы не рекомендуем этот подход.
### Настройка прокси вручную
> **Примечание:** Эта функция доступна начиная с версии `react-scripts@1.0.0`.
Если опция `proxy` недостаточно гибкая для вас, вы можете указать объект следующего вида (в `package.json`).<br>
Вы также можете указать любое значение конфигурации, которое поддерживают модули [**http-proxy-middleware**](https://github.com/chimurai/http-proxy-middleware#options) или [**http-proxy**](https://github.com/nodejitsu/node-http-proxy#options).
```js
{
// ...
"proxy": {
"/api": {
"target": "<url>",
"ws": true
// ...
}
}
// ...
}
Все запросы, соответствующие этому пути, будут перенаправлены, без исключений. Это включает запросы для text/html, которые стандартная опция proxy не перенаправляет.
Если вам требуется указать несколько прокси, вы можете сделать это, добавив дополнительные записи. Соответствие осуществляется с помощью регулярных выражений, поэтому вы можете использовать регулярное выражение для соответствия нескольким путям.
{
// ...
"proxy": {
// Соответствует любому запросу, начинающемуся с /api
"/api": {
"target": "<url_1>",
"ws": true
// ...
},
// Соответствует любому запросу, начинающемуся с /foo
"/foo": {
"target": "<url_2>",
"ssl": true,
"pathRewrite": {
"^/foo": "/foo/beta"
}
// ...
},
// Соответствует /bar/abc.html, но не /bar/sub/def.html
"/bar/[^/]*[.]html": {
"target": "<url_3>",
// ...
},
// Соответствует /baz/abc.html и /baz/sub/def.html
"/baz/.*/.*[.]html": {
"target": "<url_4>"
// ...
}
}
// ...
}
Если вы используете WebSocket-движок, такой как Socket.io, вам потребуется запущенный сервер Socket.io, который можно использовать в качестве целевого объекта прокси. Socket.io не будет работать с обычным WebSocket-сервером. В частности, не стоит ждать, что Socket.io будет работать с тестом эхо от websocket.org.
Доступна хорошая документация по установке сервера Socket.io.
Обычные WebSocket будут работать с обычным WebSocket-сервером, а также с тестом эхо от websocket.org. Вы можете использовать библиотеки, такие как ws для сервера, вместе с нативными WebSocket в браузере.
Независимо от выбранной технологии, вы можете вручную настроить прокси-запросы WebSocket в файле package.json:
{
// ...
"proxy": {
"/socket": {
// Ваш совместимый WebSocket-сервер
"target": "ws://<socket_url>",
// Уведомите http-proxy-middleware о том, что это прокси-сервер для WebSocket.
// Также позволяет проксировать запросы WebSocket без дополнительного HTTP-запроса
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws": true
// ...
}
}
// ...
}
Примечание: эта функциональность доступна с версии
react-scripts@0.4.0.
Текст переведён согласно указанным правилам.Вы можете потребовать, чтобы сервер разработки обслуживал страницы через HTTPS. Одним из случаев использования этого может быть использование функции "proxy" для проксирования запросов к серверу API, если сам сервер API работает через HTTPS.Чтобы сделать это, установите переменную окружения HTTPS равной значению true, затем запустите сервер разработки обычно командой npm start:
set HTTPS=true&&npm start
($env:HTTPS = $true) -and (npm start)
(Замечание: отсутствие пробелов является намеренным.)
HTTPS=true npm start
Учтите, что сервер будет использовать самоподписанный сертификат, поэтому ваш браузер почти наверняка покажет предупреждение при доступе к странице.
<meta> на сервереИмея в виду, что Create React App не поддерживает серверное рендеринг, вы можете задаться вопросом, как сделать метатеги динамическими и отражать текущий URL. Для решения этой проблемы рекомендуется добавить плейсхолдеры в HTML, например:
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__">
<meta property="og:description" content="__OG_DESCRIPTION__">
</head>
</html>
Затем, на сервере, независимо от используемого бэкэнда, можно считать index.html в память и заменить __OG_TITLE__, __OG_DESCRIPTION__ и любые другие плейсхолдеры значениями, зависящими от текущего URL. Убедитесь, что санируете и экранируете интерполируемые значения так, чтобы они были безопасны для встраивания в HTML!
Если вы используете сервер на Node.js, вы даже можете разделить логику маршрутизации между клиентом и сервером. Однако дублирование также работает хорошо в простых случаях.## Предрендерилирование в статические HTML-файлы
Если вы хостите свой build с помощью провайдера статического хостинга, вы можете использовать react-snapshot или react-snap для генерации HTML-страниц для каждого маршрута или относительной ссылки в вашем приложении. Эти страницы затем активно становятся "гидратированными", когда загружается пакет JavaScript.
Существуют также возможности использования этого подхода вне статического хостинга, чтобы снизить нагрузку на сервер при генерации и кэшировании маршрутов.
Основное преимущество предрендерилирования заключается в том, что вы получаете основной контент каждой страницы вместе с HTML-представлением — независимо от того, успешно ли был загружен пакет JavaScript. Это также увеличивает вероятность того, что каждый маршрут вашего приложения будет найден поисковыми системами.
Вы можете прочитать больше о нулевой конфигурации предрендерилировании (также называемом snapshotting).
Аналогично предыдущему разделу, вы можете оставить некоторые плейсхолдеры в HTML, которые внедряют глобальные переменные, например:```js
<script> window.SERVER_DATA = __SERVER_DATA__; </script> ```Затем на сервере вы можете заменить __SERVER_DATA__ на JSON с реальными данными непосредственно перед отправкой ответа. Клиентский код может затем прочитать window.SERVER_DATA, чтобы использовать его. Убедитесь, что JSON очищен от вредоносного кода перед отправкой клиенту.com/node-security/горизонт-более-самого-в-DJNQ-и-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-проекте-вернуться-в-аппликейшнс-в-Запуск тестов>Примечание: эта функция доступна с версией react-scripts@0.3.0 и выше.
Для того чтобы узнать, как включить её в старых проектах, прочитайте миграционное руководство!
Create React App использует Jest в качестве своего запускателя тестов. Для подготовки к этой интеграции мы провели значительное обновление Jest, поэтому если вы слышали плохое мнение о нём несколько лет назад, попробуйте его ещё раз.
Jest — это запускатель на основе Node.js. Это значит, что тесты всегда выполняются в окружении Node.js и не в реальном браузере. Это позволяет нам обеспечивать быстрый темп работы и предотвращает возникновение ложноположительных результатов.
Хотя Jest предоставляет глобальные объекты браузера, такие как window, благодаря jsdom, они являются лишь приближением поведения настоящего браузера. Jest предназначен для использования для юнит-тестирования вашей логики и компонентов, а не особенностей DOM.
Мы рекомендуем использовать отдельный инструмент для браузерных конечных тестов, если вам нужны такие тесты. Они выходят за рамки Create React App.
Jest будет искать файлы с тестами с любым из следующих популярных соглашений для имени файла:* Файлы с расширением .js внутри папок с названием __tests__.
.test.js..spec.js.Файлы с расширениями .test.js / .spec.js (или папки __tests__) могут находиться на любом уровне ниже папки src.
Мы рекомендуем располагать файлы с тестами (или папки __tests__) рядом с кодом, который они проверяют, чтобы относительные импорты были короче. Например, если App.test.js и App.js находятся в одной папке, тест просто должен import App from './App', вместо длинного относительного пути. Коллокация также помогает быстро находить тесты в больших проектах.
Когда вы запускаете npm test, Jest запускается в режиме наблюдения. Каждый раз, когда вы сохраните файл, он выполнит тесты заново, точно так же, как npm start перекомпилирует код.
Наблюдатель включает интерактивный интерфейс командной строки с возможностью запуска всех тестов или сосредоточиться на шаблоне поиска. Он спроектирован таким образом, чтобы вы могли оставить его открытым и наслаждаться быстрыми повторными запусками. Вы можете узнать команды из заметки «Watch Usage», которую наблюдатель печатает после каждого запуска:
npm test, Jest выполняет тесты только для файлов, изменившихся с момента последнего коммита. Это оптимизация, направленная на то, чтобы ваши тесты выполнялись быстро независимо от количества ваших тестов. Однако это предполагает, что вы часто не коммитируете код, который не прошёл тесты.Jest всегда явно указывает, что он выполнил тесты только для файлов, изменившихся с момента последнего коммита. Вы также можете нажать a в режиме наблюдения, чтобы заставить Jest выполнить все тесты.Jest всегда выполняет все тесты на сервере непрерывной интеграции или если проект находится вне Git или Mercurial репозитория.
Чтобы создать тесты, добавьте блоки it() (или test()) с названием теста и его кодом. Вы можете опционально обернуть их в блоки describe() для логической группировки, но это ни требуется, ни рекомендовано.
Jest предоставляет встроенную глобальную функцию expect() для создания утверждений. Пример базового теста может выглядеть так:
import sum from './sum';
it('складывает числа', () => {
expect(sum(1, 2)).toEqual(3);
expect(sum(2, 2)).toEqual(4);
});
Все поддерживаемые Jest утверждения подробно документированы здесь.
Вы также можете использовать jest.fn() и expect(fn).toBeCalled() для создания "шпионов" или мока функций.
Существует широкий спектр методик тестирования компонентов. Они варьируются от "дымовых тестов", проверяющих, что компонент отображается без выброса ошибок, до поверхностного рендеринга и тестирования части вывода, до полного рендеринга и тестирования жизненного цикла и изменений состояния компонента.Различные проекты выбирают различные соглашения по тестированию на основе частоты изменений компонентов и количества логики, которую они содержат. Если вы ещё не выбрали стратегию тестирования, мы рекомендуем вам начать с создания простых "дымовых тестов" для ваших компонентов:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('рендерится без выбрасывания ошибок', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Этот тест монтирует компонент и проверяет, что он не выбросил ошибку во время отрисовки. Тесты такого типа предоставляют много ценной информации с минимальными усилиями, поэтому они являются отличным началом, и этот тест вы найдёте в файле src/App.test.js.
Когда вы сталкиваетесь с багами, вызванными изменениями компонентов, вы получите более глубокое понимание того, какие части этих компонентов следует тестировать в вашем приложении. Это может быть хорошее время, чтобы представить более конкретные тесты, утверждающие конкретный ожидаемый вывод или поведение.
Если вы хотите тестировать компоненты в изоляции от дочерних компонентов, которые они рендерят, мы рекомендуем использовать метод shallow() от Enzyme. Для установки его выполните следующую команду:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
```Альтернативно вы можете использовать `yarn`:
```sh
yarn add enzyme enzyme-adapter-react-16 react-test-renderer
С версии Enzyme 3 вам потребуется установить Enzyme вместе с адаптером, соответствующим используемой версии React. (Примеры выше используют адаптер для React Yöntem 16.)
Адаптер также потребует конфигурации в вашем глобальном файле настройки:
src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
Примечание: Учитывайте, что если вы решите "выпустить" до создания файла
src/setupTests.js, результирующий файлpackage.jsonне будет содержать никаких ссылок на него. Читайте здесь, чтобы узнать, как добавить это после выпуска.
Теперь вы можете написать тест на основе этого:
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('рендерится без выбрасывания ошибок', () => {
shallow(<App />);
});
```В отличие от предыдущего теста на основе `ReactDOM.render()`, этот тест рендерит только `<App>` и не переходит глубже. Например, даже если `<App>` сам рендерит `<Button>`, который выбрасывает ошибку, этот тест пройдет успешно. Shallow рендеринг отлично подходит для изолированных юнит-тестов, но вы всё ещё можете захотеть создать некоторые полные тесты рендера, чтобы убедиться, что компоненты правильно интегрированы. Enzyme поддерживает [полный рендеринг с помощью mount()](http://airbnb.io/enzyme/docs/api/mount.html), и вы также можете использовать его для тестирования изменений состояния и жизненного цикла компонента. Вы можете прочитать [документацию Enzyme](http://airbnb.io/enzyme/) для получения информации о других методах тестирования. Документация Enzyme использует Chai и Sinon для проверок, но вы не обязаны использовать их, так как Jest предоставляет встроенные `expect()` и `jest.fn()` для шпионов.Вот пример из документации Enzyme, который проверяет конкретный вывод, переписанный с использованием матчера Jest:
```js
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('рендерит приветственный текст', () => {
const wrapper = shallow(<App />);
const welcome = <h2>Добро пожаловать в React</hbk>;
// expect(wrapper.contains(welcome)).to.equal(true);
expect(wrapper.contains(welcome)).toEqual(true);
});
Все матчеры Jest подробно описаны здесь.
Однако вы также можете использовать стороннюю библиотеку для проверок, например Chai, если хотите, как описано ниже.
Кроме того, вам может пригодиться jest-enzyme, чтобы упростить ваши тесты с помощью понятных матчеров. Вышеупомяченный код contains можно записать проще с использованием jest-enzyme.
expect(wrapper).toContainReact(welcome)
Чтобы это сделать, установите jest-enzyme:
npm install --save jest-enzyme
Альтернативно вы можете использовать yarn:
yarn add jest-enzyme
Импортируйте его в src/setupTests.js, чтобы сделать доступными его матчеры во всех тестах:
import 'jest-enzyme';
expect() для проверок и jest.fn() для шпионов. Если у вас возникли проблемы с ними, пожалуйста, сообщите об этом в Issues Jest, и мы исправим их. Мы намерены продолжать совершенствовать их для использования с React, поддерживают, например, красивое отображение React элементов как JSX.Однако, если вы привыкли к другим библиотекам, таким как Chai и Sinon, или если у вас есть существующий код, использующий их, который вы хотели бы перенести, вы можете импортировать их обычным образом следующим образом:import sinon from 'sinon';
import { expect } from 'chai';
и затем использовать их в ваших тестах так же, как вы обычно делаете.
Примечание: эта функциональность доступна с версией
react-scripts@0.4.0и выше.
Если ваше приложение использует браузерную API, которую вы хотите имитировать в ваших тестах, или если вам просто требуется глобальная настройка перед запуском тестов, добавьте файл src/setupTests.js в проект. Он будет автоматически выполнен до запуска ваших тестов.
Например:
src/setupTests.js
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
clear: jest.fn()
};
global.localStorage = localStorageMock;
Примечание: помните, что если вы решите "выполнить eject" до создания файла
src/setupTests.js, результирующий файлpackage.jsonне будет содержать никаких ссылок на него, поэтому вам следует создать свойствоsetupTestFrameworkScriptFileв конфигурации для Jest вручную, как показано ниже:
"jest": { // ... "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js" }
Вы можете заменить it() на xit() для временного исключения теста из выполнения.
Аналогично, fit() позволяет сосредоточиться на конкретном тесте, не выполняя других тестов.### Отчет о покрытии
Jest имеет встроенную систему отчета о покрытии, которая отлично работает с ES6 и требует минимальной конфигурации.
Для запуска отчета о покрытии выполните команду npm test -- --coverage (обратите внимание на дополнительный -- в середине). Этот отчет будет иметь вид:
Учитывайте, что тесты выполняются значительно медленнее при учете покрытия, поэтому рекомендуется выполнять этот процесс отдельно от вашего обычного рабочего процесса.
По умолчанию конфигурация покрытия Jest может быть переопределена путем добавления одного из следующих поддерживаемых ключей в конфигурацию Jest в вашем файле package.json.
Поддерживаемые переопределения:
Пример файла package.json:```json
{
"name": "ваш-пакет",
"jest": {
"collectCoverageFrom" : [
"src/**/*.{js,jsx}",
"!/node_modules/",
"!/path/to/dir/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": ["text"],
"snapshotSerializers": ["my-serializer-module"]
}
}
### Непрерывная интеграцияПо умолчанию `npm test` запускает монитор с интерактивной командной строкой. Однако вы можете заставить его выполнить тесты один раз и завершить процесс, установив переменную окружения под названием `CI`.При создании сборки вашего приложения с помощью `npm run build` проверка предупреждений линтера по умолчанию не выполняется. Как и в случае с `npm test`, вы можете заставить сборку выполнять проверку предупреждений линтера, установив переменную окружения `CI`. Если будут найдены какие-либо предупреждения, сборка будет считаться неудачной.
Популярные серверы непрерывной интеграции уже по умолчанию устанавливают переменную окружения `CI`, но вы также можете сделать это самостоятельно:
### На серверах непрерывной интеграции
#### Travis CI
1. Следуйте [руководству "Getting Started"](https://docs.travis-ci.com/user/getting-started/) для синхронизации вашего репозитория GitHub с Travis. Возможно, вам придется инициализировать некоторые настройки вручную на вашей странице [профиля](https://travis-ci.org/profile).
1. Добавьте файл `.travis.yml` в ваш репозиторий Git.
language: node_js node_js:
1. Вызовите свой первый билд с помощью `git push`.
1. [Настройте свой билд Travis CI](https://docs.travis-ci.com/user/customizing-the-build/), если это необходимо.
#### CircleCI
Следуйте [этому руководству](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) для настройки CircleCI с проектом Create React App.
### В своем окружении
##### Windows (cmd.exe)
```cmd
set CI=true && npm test
set CI=true && npm run build
(Примечание: отсутствие пробелов между командами намеренно.)
($env:CI = $true) -and (npm test)
```powershell
($env:CI = $true) -and (npm run build)
CI=true npm test
CI=true npm run build
Команда тестирования заставляет Jest выполнить тесты один раз вместо запуска монитора.
Если вы часто используете этот подход во время разработки, пожалуйста, отправьте запрос, чтобы сообщить нам о вашем использовании, так как мы хотим сделать монитор лучшим средством и готовы менять его работу для удовлетворения большего количества рабочих процессов.
Команда сборки проверяет предупреждения линтера и считает сборку неудачной, если они найдены.
По умолчанию, файл package.json сгенерированного проекта выглядит следующим образом:
{
"scripts": {
"start": "react-scripts start",
Yöntem: "react-scripts build",
"test": "react-scripts test --env=jsdom"
}
}
Если вы знаете, что ни один из ваших тестов не зависит от jsdom, вы можете безопасно удалить --env=jsdom, и ваши тесты будут выполняться быстрее:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"
}
}
Чтобы помочь вам принять решение, вот список API, которые необходимо использовать с jsdom:
Исправленные ошибки:
window и document
TestUtils.renderIntoDocument() (короткий путь для вышеупомянутого)
mount() в EnzymeНапротив, jsdom не требуется для следующих API:
TestUtils.createRenderer() (псевдо-рендеринг)
Кроме того, jsdom также не требуется для тестирования снапшотов.
Тестирование снапшотов — это функциональность Jest, которая автоматически создаёт текстовые снимки ваших компонентов и сохраняет их на диске таким образом, что при изменении внешнего вида UI вы получите уведомление без необходимости самостоятельно писать утверждения на выходные данные компонента. Подробнее о тестировании снапшотов.
Если вы используете Visual Studio Code, есть расширение Jest, которое работает с Create React App прямо из коробки. Это предоставляет множество функций IDE-подобных возможностей, работая с текстовым редактором: показывает состояние выполнения тестов с потенциальными сообщениями об ошибках в реальном времени, автоматически запускает и останавливает мониторинг, а также предлагает однонажатие обновление снапшотов. 
Примечание: Отладка тестов требует Node.js версии 8 или выше.
Добавьте следующее в раздел scripts вашего проекта в файле package.json.
"scripts": {
"test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom"
}
Добавьте debugger; в любом тесте и запустите:
$ npm run test:debug
Это начнет выполнение ваших тестов Jest, но приостановит выполнение перед тем как приступить к нему, чтобы позволить отладчику подключиться к процессу.
Откройте следующее в Google Chrome
about:inspect
После открытия этой ссылки, будут отображены средства разработчика Google Chrome. Выберите inspect для вашего процесса, и будет установлена точка останова на первой строке скрипта React (это делается просто для того, чтобы дать вам время открыть средства разработчика и предотвратить выполнение Jest до того, как вы успели это сделать). Нажмите кнопку, которая выглядит как кнопка «Play», находящуюся в правом верхнем углу экрана, чтобы продолжить выполнение. Когда Jest выполняет тест, содержащий команду debugger, выполнение приостановится, и вы сможете исследовать текущий контекст и стек вызовов.>Примечание: опция командной строки --runInBand гарантирует, что Jest выполнит тесты в одном процессе вместо создания отдельных процессов для каждого теста. Обычно Jest выполняет тесты параллельно через различные процессы, однако сложно одновременно отладить множество процессов.### Отладка тестов в Visual Studio Code
Поддержка отладки тестов Jest доступна прямо из коробки для Visual Studio Code.
Используйте следующую конфигурацию файла launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Отладка тестов CRA",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Обычно в приложении имеется множество UI-компонентов, каждый из которых имеет множество различных состояний. Например, простой компонент кнопки может иметь следующие состояния:
Обычно сложно увидеть эти состояния без запуска образца приложения или примеров.
Создание React App по умолчанию не включает никаких инструментов для этого, но вы можете легко добавить Storybook для React (источник) или React Styleguidist (источник) в ваш проект. Это сторонние инструменты, позволяющие вам разрабатывать компоненты и видеть все их состояния в изоляции от вашего приложения.
Вы также можете развернуть свой Storybook или руководство по стилю как статическое приложение. Таким образом, каждый член команды сможет просматривать и проверять различные состояния UI-компонентов без запуска сервера или создания учётной записи в вашем приложении.
Storybook — это среда разработки для React UI-компонентов. Он позволяет просматривать библиотеку компонентов, видеть различные состояния каждого компонента и взаимодействовать с ними для разработки и тестирования.
Сначала установите следующий npm-пакет глобально:
npm install -g @storybook/cli
Затем выполните следующую команду внутри директории вашего приложения:
npx getstorybook
После этого следуйте инструкциям на экране.
Узнайте больше о React Storybook:
npm install --save react-styleguidist
Альтернативно вы можете использовать `yarn`:
```sh
yarn add react-styleguidist
Затем добавьте эти скрипты в ваш package.json:
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",
После этого выполните следующую команду внутри директории вашего приложения:
npm run styleguide
После этого следуйте инструкциям на экране.
Узнайте больше о React Styleguidist:
Создание React App не предоставляет никакой встроенной функциональности для публикации компонента в npm. Если вы готовы извлечь компонент из своего проекта так, чтобы другие люди могли им воспользоваться, мы рекомендуем переместить его в отдельную директорию вне вашего проекта и затем использовать инструмент, такой как nwb, чтобы подготовить его для публикации.
По умолчанию производственная сборка является полностью функциональной, работающей в офлайн-режиме прогрессивным веб-приложением (PWA).
Прогрессивные веб-приложения быстрее и надежнее традиционных веб-страниц и предоставляют захватывающий мобильный опыт:* Все статические ассеты сайта кэшируются, что позволяет странице быстро загружаться при последующих посещениях независимо от состояния сети (например, 2G или 3G). Обновления скачиваются в фоновом режиме.
sw-precache-webpack-plugin
встроен в производственную конфигурацию,
и он будет отвечать за генерацию файла служебного работника, который автоматически
предварительно закэширует все ваши локальные активы и будет поддерживать их актуальность при каждом развертывании обновлений.
Служебный работник будет использовать стратегию "кэш-первым" (cache-first strategy)
для обработки всех запросов к локальным активам, включая начальный HTML, обеспечивая тем самым,
что ваш веб-приложение будет надежно быстрым даже на медленной или ненадежной сети.производственного развертывания, то удалите вызов registerServiceWorker()
из src/index.js.
Если вы ранее активировали сервисные работники в вашем производственном развертывании
и решили, что хотите деактивировать их для всех ваших существующих пользователей,
вы можете заменить вызов registerServiceWorker() в
src/index.js сначала, модифицируя импорт сервисного работника:
import { unregister } from './registerServiceWorker';
и затем вызвать unregister().
После того как пользователь посетил страницу, которая имеет unregister(),
сервисный работник будет удален. Обратите внимание, что в зависимости от того, как /service-worker.js предоставляется,
может потребоваться до 24 часов для того, чтобы кеш был аннулирован.
Сервисные работники требуют HTTPS,
хотя для удобства локальных тестов эта политика
не применяется к localhost.
Если ваш сервер поддерживает HTTPS, то регистрация сервисного работника завершится ошибкой, но остальная часть вашего веб-приложения останется функциональной.1. Сервисные работники ещё не поддерживаются
во всех браузерах. Регистрация сервисного работника не будет пытаться
в браузерах, которые не поддерживают его.1. Сервисный работник только активируется в производственной среде,
например, командой npm run build. Рекомендуется не активировать офлайн-в-первую-очередь сервисный работник в среде разработки, так как это может привести к разочарованиям при использовании ранее закэшированных активов, которые не содержат последних изменений, сделанных вами локально.1. Если вам необходимо локально протестировать вашего офлайн-в-первую-очередь сервисного работника, соберите приложение (используя npm run build) и запустите простой HTTP-сервер из вашего каталога сборки. После выполнения скрипта сборки, create-react-app предоставит инструкции для одного способа локального тестирования вашего производственного сбора и инструкции по развертыванию имеют инструкции для использования других методов. Убедитесь, что всегда используете окно в режиме инкогнито, чтобы избежать проблем с кешем вашего браузера.
Если это возможно, настройте вашу среду производства так, чтобы она обслуживала сгенерированный service-worker.js с отключенным кэшированием HTTP. Если это невозможно — GitHub Pages, например, не позволяет вам менять стандартный срок хранения кэша HTTP в 10 минут — то имейте в виду, что если вы посетите ваш сайт в производственной среде, а затем снова посетите его до истечения срока действия service-worker.js в вашем кэше HTTP, вы продолжите получать ранее закэшированные активы из сервис-воркера. Если вам требуется немедленно просмотреть обновлённое развертывание в производственной среде, выполнение команды Shift+Refresh временно отключит сервис-воркер и загрузит все активы из сети.1. Пользователи не всегда знакомы с приложениями, ориентированными на работу в режиме офлайн. Полезно сообщить пользователю о том, когда сервис-воркер завершает заполнение ваших кэшей (показывая сообщение «Это веб-приложение работает офлайн!») и также сообщить ему, когда сервис-воркер получил последние обновления, доступные при следующей загрузке страницы (показывая сообщение «Новый контент доступен; пожалуйста, обновите страницу»). Отображение этих сообщений пока остаётся упражнением для разработчика, но как начальная точка, можно использовать логику, включённую в src/registerServiceWorker.js, которая демонстрирует события жизненного цикла сервис-воркера, на которые следует подписаться для обнаружения каждого сценария, и которая по умолчанию просто выводит соответствующие сообщения в консоль JavaScript.1. По умолчанию сгенерированный файл сервис-воркера не будет перехватывать или закэшировать любой кросс-доменный трафик, такой как HTTP запросы API, изображения или встраивания, загруженные с другого домена. Если вы хотите использовать стратегию runtime-caching для этих запросов, вы можете eject и затем настроить опцию
runtimeCaching
в конфигурационном файле SWPrecacheWebpackPlugin файла
webpack.config.prod.js.
public/manifest.json, который можно настроить с учетом специфических деталей вашего веб-приложения.
Когда пользователь добавляет веб-приложение на домашний экран с помощью браузера Chrome или Firefox на Android, метаданные в файле manifest.json определяют, какие значки, названия и цвета брендинга будут использоваться при отображении веб-приложения. Руководство по манифесту веб-приложений предоставляет больше контекста относительно того, что означают каждое поле, а также как ваши настройки повлияют на опыт ваших пользователей.
Инструмент анализа карт источников анализирует JavaScript-пакеты с использованием карт источников. Это помогает понять, откуда возникает увеличение объема кода.
Чтобы добавить инструмент анализа карт источников в проект Create React App, выполните следующие шаги:
npm install --save source-map-explorer
Альтернативно вы можете использовать yarn:
yarn add source-map-explorer
Затем в файле package.json добавьте следующую строку в раздел scripts:
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
}
```Для анализа пакета выполните команды сборки в режиме производства, а затем запустите скрипт анализа.
npm run build npm run analyze
## Развертывание
Команда `npm run build` создаёт директорию `build` с производственной версией вашего приложения. Настройте ваш любимый HTTP-сервер так, чтобы посетители сайта получали `index.html`, а запросы к статическим путям, таким как `/static/js/main.<hash>.js`, обслуживались содержимым файла `/static/js/main.<hash>.js`.
### Статический сервер
Для сред, использующих [Node.js](https://nodejs.org/), самым простым способом решения этой задачи будет установка [serve](https://github.com/zeit/serve) и использование его для дальнейшего обслуживания:
```sh
npm install -g serve
serve -s build
Последняя команда выше будет обслуживать ваш статический сайт на порту 5000. Как многие внутренние настройки serve, порт может быть скорректирован с помощью флагов -p или --port. Запустите следующую команду для получения полного списка доступных опций:
serve -h
Вы не обязательно должны использовать статический сервер для запуска проекта Create React App в продакционном окружении. Он работает точно так же хорошо, когда интегрирован в существующий динамический сервер.
Вот пример с использованием Node и Express:
const express = require('express');
const path = require('path');
const app = express();
``````markdown
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);
Выбор вашего серверного программного обеспечения также не имеет большого значения. Поскольку Create React App полностью агнотичен к платформе, нет необходимости явно использовать Node.
Папка build со статическими активами является единственным выходом, производимым Create React App.
Однако этого может оказаться недостаточно, если вы используете клиентскую маршрутизацию. Прочитайте следующий раздел, если хотите поддерживать URL-адреса типа /todos/42 в вашем одностраничном приложении.
Если вы используете маршруты, которые используют HTML5 API истории (pushState), многие статические серверы будут работать некорректно. Например, если вы используете React Router с маршрутом для /todos/42, сервер разработки будет корректно отвечать на запрос localhost:3000/todos/42, но Express, обслуживающий сборку как выше, не сможет это сделать.
Это происходит потому что при свежей загрузке страницы для /todos/42, сервер пытается найти файл build/todos/42 и не находит его. Серверу требуется конфигурация для ответа на запрос к /todos/42 путём обслуживания файла index.html. Например, мы можем модифицировать наш пример Express выше, чтобы он обслуживал index.html для любых неизвестных путей:
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
``````diff
app.use(express.static(path.join(__dirname, 'build')));
-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Если вы используете Apache HTTP Server, вам потребуется создать файл .htaccess в папке public, который будет выглядеть следующим образом:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Это будет скопировано в папку build, когда вы запустите команду npm run build.
Если вы используете Apache Tomcat, вам следует следовать за этим ответом на Stack Overflow.
Теперь запросы к /todos/42 будут корректно обрабатываться как в режиме разработки, так и в продакшне.
На продакшн сборке, и в браузере, который поддерживает сервисные работники, сервисный работник автоматически будет обрабатывать все навигационные запросы, такие как для
/todos/42, предоставляя закэшированную версию вашего файла index.html. Эта функциональность маршрутизации навигации сервисного работника может быть настроена или отключена путём выполнения команды eject и последующего изменения опций navigateFallback и navigateFallbackWhitelist плагина SWPrecachePlugin конфигурации.
Когда пользователи устанавливают ваше приложение на домашний экран своего устройства, по умолчанию конфигурация создаёт сокращение на /index.html. Это может не работать для клиентских маршрутов, ожидающих, что приложение будет доступно по адресу /. Измените манифест веб-приложения в файле public/manifest.json и установите значение start_url таким образом, чтобы оно соответствовало требуемому URL-шаблону, например:```js
"start_url": ".",
### Настройка для относительных путей
По умолчанию, Create React App создает сборку, предполагая, что ваше приложение находится в корневом каталоге сервера. Чтобы переопределить это поведение, укажите `homepage` в вашем `package.json`, например:
```js
"homepage": "http://mywebsite.com/relativepath",
Это позволит Create React App правильно определить корневую директорию для использования в сгенерированном HTML-файле.
Примечание: Если вы используете react-router@^4, вы можете указать базовый путь для <Link> с помощью свойства basename на любом <Router>. Более подробная информация здесь.
Например:
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> <!-- рендерится как <a href="/calendar/today"> -->
Примечание: эта функция доступна с
react-scripts@0.9.0и выше.
Если вы не используете HTML5 pushState исторический API или вообще не используете клиентскую маршрутизацию, нет необходимости указывать URL, с которого будет служиться ваш приложение. Вместо этого вы можете поместить это в вашем package.json:
"homepage": ".",
Это гарантирует, что все пути к активам относительны к index.html. Вы сможете переместить свое приложение с http://mywebsite.com на http://mywebsite.com/relativepath или даже http://mywebsite.com/relative/path, не требуя повторной сборки.
Для использования автоматического развертывания на Azure App Service прочитайте этот блоговый пост или воспользуйтесь этим репозиторием.
Установите Firebase CLI, если ещё не сделали этого, запустив команду npm install -g firebase-tools. Создайте аккаунт на Firebase и создайте новый проект. Запустите команду firebase login и войдите в свой ранее созданный Firebase аккаунт.
Затем выполните команду firebase init из корневой директории вашего проекта. Вам потребуется выбрать Hosting: Настройка и развертывание сайтов Firebase Hosting и выбрать проект Firebase, который вы создали в предыдущем шаге. Вам также потребуется согласиться с тем, что будет создан файл database.rules.json, выбрать папку build как публичную директорию и согласиться с тем, что будет настроено как одностраничное приложение, отвечая положительно (y).
=== Проектная настройка
Сначала ассоциируем эту проектную директорию с проектом Firebase.
Вы можете создать несколько псевдонимов проекта, выполнив команду firebase use --add,
но пока мы просто установим по умолчанию проект.
``` ? Какой проект Firebase вы хотите ассоциировать по умолчанию? Пример приложения (example-app-fd690)
=== Настройка базы данных
Правила Firebase Realtime Database позволяют вам определить, как должна быть структурирована ваша информация, и когда она может быть считана и записана.
? Какой файл следует использовать для правил базы данных? database.rules.json
✔ Правила базы данных для example-app-fd690 были скачаны в database.rules.json.
Будущие изменения в файле database.rules.json будут применяться к правилам базы данных при выполнении команды firebase deploy.
=== Настройка Hosting
Ваш публичный каталог — это папка (относительно вашего проектного каталога), которая будет содержать ассеты для хостинга, загружаемые с помощью команды firebase deploy. Если у вас есть процесс сборки для ваших ассетов, используйте выходной каталог сборки.
? Какую директорию вы хотите использовать как публичную? build
? Конфигурировать как одностраничное приложение (перезаписывать все URL на /index.html)? Да
✔ Создана build/index.html
i Запись информации конфигурации в firebase.json...
i Запись информации проекта в .firebaserc...
✔ Полная инициализация Firebase завершена!
ВАЖНО: вам нужно правильно настроить HTTP-заголовки кэширования для файла service-worker.js в файле firebase.json, чтобы вы могли видеть изменения после первого развертывания ([вопрос #2440](https://github.com/facebookincubator/create-react-app/issues/2440)). Это должно быть добавлено внутри ключа "hosting" следующим образом:```
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
}
Теперь, после создания производственного билда с помощью команды npm run build, вы можете развернуть его, выполнив команду firebase deploy.
=== Развертывание в 'example-app-fd690'...
i развертывание базы данных, хостинга
✔ база данных: правила готовы к развертыванию.
i хостинг: подготовка каталога сборки для загрузки...
Загрузка: [============================== ] 75%
✔ хостинг: каталог сборки успешно загружен
✔ хостинг: 8 файлов успешно загружены
i начало процесса выпуска (может занять несколько минут)...
✔ Развертывание завершено!
Консоль проекта: https://console.firebase.google.com/project/example-app-fd690/overview
URL хостинга: https://example-app-fd690.firebaseapp.com
Для получения дополнительной информации см. Добавление Firebase к вашему проекту на JavaScript.
Примечание: эта функция доступна с версии
react-scripts@0.2.0и выше.#### Шаг 1: Добавьтеhomepageвpackage.json
Этот шаг очень важен!
Если вы пропустите его, ваше приложение не будет развёрнуто правильно.
Откройте свой package.json и добавьте поле homepage для вашего проекта:
"homepage": "https://myusername.github.io/my-app",
или для страницы пользователя GitHub:
"homepage": "https://myusername.github.io",
Создание React App использует поле homepage для определения корневого URL в созданном HTML-файле.#### Шаг 2: Установите gh-pages и добавьте deploy в scripts в package.json
Теперь каждый раз, когда вы запустите npm run build, вы увидите руководство по инструкциям по развёртыванию на GitHub Pages.
Чтобы опубликовать ваш сайт по адресу https://myusername.github.io/my-app, выполните команду:
npm install --save gh-pages
Альтернативно вы можете использовать yarn:
yarn add gh-pages
Добавьте следующие скрипты в ваш package.json:
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
Скрипт predeploy будет выполнен автоматически перед выполнением скрипта deploy.
Если вы развёртываете на странице пользователя GitHub вместо страницы проекта, вам потребуется сделать два дополнительных изменения:
package.json, чтобы пушить развёртки на ветку master: "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build",
npm run deploy
Затем выполните команду:
npm run deploy
gh-pages
Наконец, убедитесь, что опция GitHub Pages в настройках вашего проекта на GitHub установлена на использование ветки gh-pages:
Вы можете настроить пользовательский домен с помощью GitHub Pages, добавив файл CNAME в папку public/.#### Примечания по клиентской маршрутизации
GitHub Pages не поддерживает маршрутизаторы, использующие HTML5 pushState исторический API (например, React Router с использованием browserHistory). Это связано с тем, что при свежей загрузке страницы для URL вроде http://user.github.io/todomvc/todos/42, где /todos/42 является маршрутом фронтенд-приложения, сервер GitHub Pages возвращает ошибку 404, так как он ничего не знает о /todos/42.
Если вы хотите добавить маршрутизатор в проект, хостируемый на GitHub Pages, вот несколько решений:
hashHistory, чтобы добиться такого эффекта, но URL будет длиннее и более громоздким (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Подробнее о различных реализациях истории в React Router.index.html с помощью специального параметра переадресации. Вам потребуется добавить файл 404.html со скриптом переадресации в папку build перед развертыванием проекта, и вам также потребуется добавить код для обработки параметра переадресации в index.html. Подробное объяснение этой техники можно найти в этом руководстве.#### Устранение неполадокЕсли при развертывании вы получаете ошибку типа /dev/tty: устройство не найдено или адрес не существует, попробуйте следующее:
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>.npm run deploy сноваИспользуйте Buildpack для Create React App от Heroku.
Вы можете найти инструкции в руководстве по развертыванию React с нулевой конфигурацией.
Иногда npm run build работает локально, но завершается ошибкой во время развертывания через Heroku. Ниже приведены наиболее распространённые случаи.
Если вы видите что-то вроде этого:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
Это значит, что вам следует убедиться, что регист символов файла или каталога, который вы импортируете, совпадает с тем, что вы видите на вашей файловой системе или на GitHub.Это важно потому, что Linux (операционная система, используемая Heroku) чувствителен к регистру символов. Так что MyDirectory и mydirectory — это два разных каталога, и хотя проект успешно собирается локально, различие в регистре символов вызывает проблемы с импортами на серверах Heroku.
remote: Не удалось найти необходимый файл.
remote: Название: `index.html`
remote: Поиск был проведен в: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
В этом случае убедитесь, что файл присутствует с правильной регистрацией букв и что он не игнорируется в вашем локальном .gitignore или ~/.gitignore_global.
Для ручного развертывания на CDN Netlify:
npm install netlify-cli -g
netlify deploy
Выберите build как путь для развертывания.
Для настройки непрерывной доставки:
С этой конфигурацией Netlify будет автоматически сборить и развернуть при каждом вашем коммите в git или открытом pull request:
yarn build как команду сборки и build как каталог публикацииРазвернуть сайт
Поддержка клиентской маршрутизации:
Чтобы поддерживать pushState, убедитесь, что создан файл public/_redirects со следующими правилами переадресации:
/* /index.html 200
При сборке проекта, Create React App поместит содержимое папки public в выходные данные сборки.
now для бесплатного развертывания вашего приложения.Установите командную строку now либо через рекомендованное приложение для рабочего стола, либо через Node.js с помощью npm install -g now.
Соберите ваше приложение, запустив npm run build.
Перейдите в директорию сборки, выполнив cd build.
Запустите now --name your-project-name из директории сборки. Вы увидите URL-адрес now.sh в выводе, такой как этот:
> Готово! https://your-project-name-tpspyhtdtk.now.sh (скопировано в буфер обмена)
Вставьте этот URL-адрес в ваш браузер после завершения сборки, чтобы просмотреть свое развернутое приложение.
Подробности доступны в этой статье.### S3 и CloudFront
Чтобы развернуть ваше приложение React на Amazon Web Services S3 и CloudFront, см. этот пост в блоге.
Установите Surge CLI, если ещё этого не сделали, запустив команду npm install -g surge. Выполните команду surge и войдите в свой аккаунт или создайте новый.
Когда вас спросят о пути проекта, убедитесь, что вы указываете папку build, например:
project path: /path/to/project/build
```Обратите внимание, что для поддержки маршрутов с использованием API `pushState` HTML5, возможно, потребуется переименовать файл `index.html` в папке `build` в `200.html` перед размещением на Surge. Это [гарантирует, что каждый URL будет использовать этот файл как страницу по умолчанию](https://surge.sh/help/adding-a-200-page-for-client-side-routing).## Расширенная конфигурацияВы можете настроить различные параметры развития и производства, установив переменные окружения в своей оболочке или с помощью файла [.env](#Добавление-переменных-окружения-разработки-в-файл-env). Переменная | Разработка | Производство | Использование
:--- | :---: | :---: | :---
BROWSER | :white_check_mark: | :x: | По умолчанию Create React App откроет системный браузер, предпочитая Chrome на macOS. Укажите [браузер](https://github.com/sindresorhus/opn#app), чтобы переопределить это поведение, или установите его в `none`, чтобы полностью отключить эту возможность. Если вам нужно настроить способ запуска браузера, вы можете указать скрипт Node.js. Все аргументы, переданные командой `npm start`, также будут переданы этому скрипту, и адрес сайта вашего приложения будет последним аргументом. Название файла вашего скрипта должно иметь расширение `.js`.
HOST | :white_check_mark: | :x: | По умолчанию сервер разработки привязывается к `localhost`. Вы можете использовать эту переменную, чтобы указать другой хост.
PORT | :white_check_mark: | :x: | По умолчанию сервер разработки попытается прослушивать порт OnClickListener 3000 или предложит выбрать следующий доступный порт. Вы можете использовать эту переменную, чтобы указать другой порт.
HTTPS | :white_check_mark: | :x: | При значении `true` Create React App запустит сервер разработки в режиме `https`.
PUBLIC_URL | :x: | :white_check_mark: | Create React App считает, что ваше приложение размещено на корневом уровне или в подкаталоге, указанном в [`package.json`].json` (`homepage`)](#building-for-relative-paths). Обычно Create React App игнорирует имя хоста. Вы можете использовать эту переменную, чтобы заставить все активы ссылаться точно на указанный URL (включая имя хоста). Это может быть полезно при использовании CDN для размещения вашего приложения.
CI | :large_orange_diamond: | :white_check_mark: | При значении `true` Create React App рассматривает предупреждения как ошибки сборки. Также он делает тестовый запуск непостоянным. Большинство CI-систем используют этот флаг по умолчанию.
REACT_EDITOR | :white_check_mark: | :x: | Когда приложение падает во время разработки, вы увидите оверлей с сообщением об ошибке и кликабельной трассировкой стека. При щелчке по нему Create React App попытается определить используемый вами редактор на основе текущих процессов и открыть соответствующий файл источника. Вы можете [отправить pull-request для обнаружения вашего редактора](https://github.com/facebookincubator/create-react-app/issues/2636). Установка этой переменной окружения переопределяет автоматическое обнаружение. Если вы это сделали, убедитесь, что переменная окружения PATH системы указывает на каталог bin вашего редактора. Вы также можете установить её в `none`, чтобы полностью отключить эту возможность.
CHOKIDAR_USEPOLLING | :white_check_mark: | :x: | При значении `true` мониторинг изменений выполняется в режиме поллинга, что необходимо внутри виртуальной машины. Используйте эту опцию, если `npm start` не обнаруживает изменения.GENERATE_SOURCEMAP | :x: | :white_check_mark: | При значении `false` карты источников не создаются для продакшн сборки. Это решает проблемы недостатка памяти на некоторых более маленьких машинах.
NODE_PATH | :white_check_mark: | :white_check_mark: | Так же как [переменная окружения `NODE_PATH` в Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), но допускаются только относительные пути. Может пригодиться для эмуляции однослойной архитектуры репозитория путём установки `NODE_PATH=src`. ## Устранение неполадок### `npm start` не обнаруживает изменения
Когда вы сохраняете файл во время выполнения `npm start`, браузер должен автоматически обновиться с новым кодом.<br>
Если этого не происходит, попробуйте один из следующих методов решения проблемы:* Если ваш проект находится в папке Dropbox, попробуйте переместить его вне этой папки.
* Если мониторинг изменений не видит файла `index.js` и вы обращаетесь к нему по имени папки, вам [необходимо перезапустить мониторинг](https://github.com/facebookincubator/create-react-app/issues/1164) из-за ошибки в Webpack.
* Некоторые редакторы, такие как Vim и IntelliJ, имеют функцию "безопасного сохранения", которая в настоящее время ломает мониторинг. Вам потребуется отключить её. Следуйте инструкциям в разделе ["Настройка вашего текстового редактора"](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
* Если путь до вашего проекта содержит скобки, попробуйте переместить проект в путь без них. Это вызвано ошибкой [монитора Webpack](https://github.com/webpack/watchpack/issues/42).
* На Linux и macOS может потребоваться [настройка системных параметров](https://github.com/webpack/docs/wiki/troubleshooting#not-enough-watchers) для увеличения количества мониторов.
* Если проект запущен внутри виртуальной машины, такой как Vagrant-развернутой VirtualBox, создайте файл `.env` в директории проекта, если он ещё не существует, и добавьте `CHOKIDAR_USEPOLLING=true` в него. Это гарантирует, что при следующем запуске `npm start` монитор будет использовать режим поллинга, необходимый внутри виртуальной машины.Если ни одно из этих решений не помогло, пожалуйста, оставьте комментарий [в этом потоке обсуждения](https://github.com/facebookincubator/create-react-app/issues/659).
### `npm test` зависает на macOS Sierra
Если вы запускаете `npm test` и консоль зависает после вывода `react-scripts test --env=jsdom`, возможно, проблема связана с вашей [Watchman](https://facebook.github.io/watchman/) установкой, как указано в [facebookincubator/create-react-app#713](https://github.com/facebookincubator/create-react-app/issues/713).
Мы рекомендуем удалить `node_modules` в вашем проекте и запустить `npm install` (или `yarn`, если вы используете его) первым делом. Если это не помогает, вы можете попробовать один из множества методов решения проблемы, упомянутых в этих темах:
* [facebook/jest#1767](https://github.com/facebook/jest/issues/1767)
* [facebook/watchman#358](https://github.com/facebook/watchman/issues/358)
* [ember-cli/ember-cli#6259](https://github.com/ember-cli/ember-cli/issues/6259)
Отчеты указывают, что установка Watchman версии 4.7.0 или новее решает проблему. Если вы используете [Homebrew](http://brew.sh/), выполните следующие команды для обновления:
```bash
watchman shutdown-server
brew update
brew reinstall watchman
Вы можете найти другие методы установки на странице документации Watchman.
Если это всё ещё не помогает, попробуйте запустить launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist.
Существуют также отчёты, что удаление Watchman решает проблему. Поэтому если ничего другого не помогает, удалите его с вашего компьютера и попробуйте снова.### Команда npm run build завершается слишком рано
Отчеты указывают, что npm run build может завершаться ошибкой на машинах с ограниченной памятью и отсутствием своп-пространства, что часто встречается в облачных средах. Даже при работе с небольшими проектами эта команда может увеличивать использование оперативной памяти системы на сотни мегабайт, поэтому если у вас менее 1 ГБ доступной памяти, ваш сборочный процесс скорее всего завершится с сообщением:
Сборка завершилась ошибкой, так как процесс был прерван слишком рано. Это, вероятно, означает, что система закончила память или кто-то вызвал
kill -9на процессе.
Если вы уверены, что не прерывали процесс, рассмотрите возможность добавления своп-пространства на машине, где выполняется сборка, или выполните сборку локально.
npm run build завершается ошибкой на HerokuЭто может быть проблемой с чувствительностью к регистру имен файлов. Пожалуйста, обратитесь к этому разделу.
Если вы используете Moment.js, вы можете заметить, что по умолчанию доступна только английская локаль. Это связано с тем, что файлы локали очень большие, и вам, возможно, требуется лишь часть всех локалей, предоставляемых Moment.js.Чтобы добавить конкретную локаль Moment.js в ваш пакет, вам потребуется явно импортировать её. Например:
import moment from 'moment';
import 'moment/locale/fr';
Если вы импортируете несколько локалей таким образом, вы сможете позднее переключаться между ними, вызывая moment.locale() с именем локали:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
Затем можно переключиться на другую локаль, используя метод moment.locale():
moment.locale('ru');
Это будет работать только для локалей, которые были явно импортированы ранее.
npm run build завершает работу с ошибкой минификацииНекоторые сторонние пакеты не компилируют свой код в ES5 перед публикацией на npm. Это часто вызывает проблемы в экосистеме, так как ни браузеры (кроме большинства современных версий), ни некоторые инструменты в настоящее время не поддерживают все возможности ES6. Мы рекомендуем публиковать код на npm как ES5 хотя бы ещё несколько лет.
src/ и обрабатывайте как приложение.В будущем мы можем начать автоматически компилировать неподходящие сторонние модули, но это пока не поддерживается. Этот подход также замедляет производственные сборки.
Отключение позволяет вам настроить всё, но после этого вы должны самостоятельно поддерживать конфигурацию и скрипты. Это может быть сложновато, если у вас много похожих проектов. В таких случаях вместо отключения мы рекомендуем создать форк react-scripts и любых других необходимых пакетов. Эта статья подробно рассматривает, как это сделать. Вы можете найти больше обсуждений в этом запросе.
Если у вас есть идеи для дополнительных рецептов "Как это сделать", которые следует добавить на эту страницу, сообщите нам или добавьте их сами!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )