Слияние кода завершено, страница обновится автоматически
Данный проект был запущен с помощью Create React App (https://github.com/facebookincubator/create-react-app).
Ниже вы найдёте некоторую информацию о том, как выполнять общие задачи.
Самую последнюю версию этого руководства можно найти здесь (https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
Обновление до новых версий (Updating to New Releases);
Отправка отзывов (Sending Feedback);
Структура папок (Folder Structure);
Доступные скрипты:
Поддерживаемые браузеры (Supported Browsers);
Поддерживаемые языковые функции и полифиллы (Supported Language Features and Polyfills);
Подсветка синтаксиса в редакторе (Syntax Highlighting in the Editor);
Отображение вывода линтера в редакторе (Displaying Lint Output in the Editor);
Отладка в редакторе (Debugging in the Editor);
Автоматическое форматирование кода (Formatting Code Automatically);
Изменение заголовка страницы (Changing the Page <title>);
Установка зависимости (Installing a Dependency);
Импорт компонента (Importing a Component);
Разбиение кода (Code Splitting);
Добавление таблицы стилей (Adding a Stylesheet);
Пост-обработка CSS (Post-Processing CSS);
Добавление препроцессора CSS (Sass, Less и т. д.) (Adding a CSS Preprocessor (Sass, Less etc.))
Добавление изображений, шрифтов и файлов (Adding Images, Fonts, and Files);
Использование папки public:
Использование глобальных переменных (Using Global Variables);
Добавление Bootstrap:
Добавление Flow (Adding Flow);
Добавление маршрутизатора (Adding a Router);
Добавление пользовательских переменных среды:
Можно ли использовать декораторы? (Can I Use Decorators?);
Получение данных с помощью запросов AJAX (Fetching Data with AJAX Requests);
Интеграция с серверной частью API:
Проксирование запросов API в разработке:
Использование HTTPS в разработке (Using HTTPS in Development);
Генерация динамических тегов meta на сервере (Generating Dynamic Tags on the Server);
Предварительная отрисовка в статические файлы HTML (Pre-Rendering into Static HTML Files);
Внедрение данных с сервера на страницу (Injecting Data from the Server into the Page);
Запуск тестов:
Отладка тестов. Отладка тестов в Chrome
Отладка тестов в Visual Studio Code
Разработка компонентов изолированно
Публикация компонентов в npm
Создание прогрессивного веб-приложения
Анализ размера пакета
Развёртывание
* *Статический сервер*
* *Другие решения*
* *Обслуживание приложений с маршрутизацией на стороне клиента*
* *Сборка для относительных путей*
* *Azure*
* *Firebase*
* *GitHub Pages*
* *Heroku*
* *Netlify*
* *Now*
* *S3 и CloudFront*
* *Surge*
Расширенная конфигурация
Устранение неполадок
* *npm start не обнаруживает изменения*
* *npm test зависает на macOS Sierra*
* *npm run build завершается слишком рано*
* *npm run build не работает на Heroku*
* *npm run build не может минимизировать*
* *Моменты (Moment.js) отсутствуют локали*
Create React App делится на два пакета:
create-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.
Поместите любые файлы JS и CSS внутрь src, иначе Webpack их не увидит.
Только файлы внутри public можно использовать из public/index.html. Инструкции по использованию ресурсов из JavaScript и HTML приведены ниже.
Однако вы можете создать больше каталогов верхнего уровня. Они не будут... Доступные скрипты
В каталоге проекта вы можете запустить:
npm start
Запускает приложение в режиме разработки. Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница перезагрузится, если вы внесёте изменения. Вы также увидите любые ошибки линтинга в консоли.
npm test
Запускает тестовый раннер в интерактивном режиме наблюдения. Подробнее см. раздел о запуске тестов.
npm run build
Собирает приложение для продакшена в папку build. Правильно связывает React в рабочем режиме и оптимизирует сборку для лучшей производительности.
Сборка минимизирована, а имена файлов включают хэши. Ваше приложение готово к развёртыванию!
Подробнее см. раздел о развёртывании.
npm run 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. Форматирование кода автоматически
Prettier — это инструмент для форматирования кода с поддержкой JavaScript, CSS и JSON. С помощью Prettier можно автоматически форматировать код, который вы пишете, чтобы обеспечить единый стиль кода в вашем проекте. Подробнее об этом можно узнать на странице Prettier на GitHub, а также посмотреть, как это работает, на этой странице.
Чтобы форматировать наш код при каждом коммите в git, нам нужно установить следующие зависимости:
npm install --save husky lint-staged prettier
Или вы можете использовать yarn:
yarn add husky lint-staged prettier
Теперь мы можем убедиться, что каждый файл отформатирован правильно, добавив несколько строк в package.json в корне проекта.
Добавьте следующую строку в раздел scripts:
"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}", чтобы отформатировать весь проект в первый раз.
Изменение тега <title> страницы
Вы можете найти исходный HTML-файл в папке public сгенерированного проекта. Вы можете отредактировать тег <title> в нём, чтобы изменить заголовок с «React App» на что-то другое.
Обратите внимание, что обычно вы не будете часто редактировать файлы в папке public. Например, добавление таблицы стилей выполняется без изменения HTML.
Если вам нужно динамически обновлять заголовок страницы на основе содержимого, вы можете использовать API браузера document.title. Для более сложных сценариев, когда вы хотите изменить заголовок из компонентов React, вы можете использовать React Helmet, стороннюю библиотеку.
Если вы используете собственный сервер для своего приложения в продакшене и хотите изменить заголовок до того, как он будет отправлен в браузер, вы можете следовать советам в этом разделе. В качестве альтернативы вы можете предварительно создать каждую страницу в виде статического HTML-файла, который затем загружает пакет JavaScript, как описано здесь.
Установка зависимости
Сгенерированный проект включает 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 вместо этого.
Например:
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Не забудьте использовать экспорт по умолчанию!
import React, { Component } from 'react';
import
``` **Кнопка из './Button'; // Импорт компонента из другого файла**
class DangerButton расширяет Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
*Помните о разнице между default и именованными экспортом.* Это распространённый источник ошибок.
Мы рекомендуем придерживаться использования default импорта и экспорта, когда модуль экспортирует только одну вещь (например, компонент). Именно это вы получаете, используя `export default Button` и `import Button from './Button'`.
Именованные экспорты полезны для служебных модулей, которые экспортируют несколько функций. Модуль может иметь не более одного экспорта по умолчанию и столько именованных экспортов, сколько захотите.
Узнайте больше о модулях ES6:
* [Когда использовать фигурные скобки?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
* [Изучение ES6: Модули](http://exploringjs.com/es6/ch_modules.html)
* [Понимание ES6: Модули](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
## Разделение кода
Вместо того чтобы загружать всё приложение перед тем, как пользователи смогут его использовать, разделение кода позволяет разделить код на небольшие фрагменты, которые затем можно загрузить по требованию.
Эта настройка проекта поддерживает разделение кода с помощью динамического `import()`. Его предложение находится на стадии 3. Функция `import()`, похожая на оператор, принимает имя модуля в качестве аргумента и возвращает `Promise`, который всегда разрешается в объект пространства имён модуля.
Вот пример:
### `moduleA.js`
```js
const moduleA = 'Hello';
export { moduleA };
App.js
import React, { Component } from 'react';
class App extends Component {
handleClick = () => {
import('./moduleA')
.then(({ moduleA }) => {
// Используйте moduleA
})
.catch(err => {
// Обработка ошибки
});
};
render() {
return (
<div>
<button onClick={this.handleClick}>Загрузить</button>
</div>
);
}
}
export default App;
Это сделает moduleA.js и все его уникальные зависимости отдельным фрагментом, который загружается только после того, как пользователь нажимает кнопку «Загрузить».
Вы также можете использовать его с синтаксисом async / await, если предпочитаете его.
Если вы используете React Router, ознакомьтесь с этим руководством о том, как использовать разделение кода с ним. Вы можете найти сопутствующий репозиторий GitHub здесь.
Также ознакомьтесь с разделом «Разделение кода» в документации React.
В этой настройке проекта используется Webpack для обработки всех ресурсов. Webpack предлагает собственный способ «расширения» концепции import за пределы JavaScript. Чтобы выразить, что файл JavaScript зависит от файла CSS, вам нужно импортировать CSS из файла JavaScript:
Button.css
.Button {
padding: 20px;
}
Button.js
import React, { Component } from 'react';
import './Button.css'; // Скажите Webpack, что Button.js использует эти стили
class Button extends Component {
render() {
// Вы можете использовать их как обычные стили CSS
return <div className="Button" />;
}
}
Это не требуется для React, но многие люди считают эту функцию удобной. Вы можете прочитать о преимуществах этого подхода здесь. Однако вы должны знать, что это делает ваш код менее переносимым на другие инструменты сборки и среды, чем Webpack.
При разработке выражение зависимостей таким образом позволяет вашим стилям быть... Переведённый текст:
Перезагружаются «на лету» по мере их редактирования. В рабочей среде все файлы CSS будут объединены в один минифицированный файл .css в выходных данных сборки.
Если вас беспокоит использование семантики, специфичной для Webpack, вы можете поместить весь свой CSS прямо в src/index.css. Он всё равно будет импортирован из src/index.js, но вы всегда можете удалить этот импорт, если позже перейдёте на другой инструмент сборки.
Эта настройка проекта автоматически минимизирует ваш CSS и добавляет префиксы поставщиков через Autoprefixer, поэтому вам не нужно об этом беспокоиться.
Например, это:
.App {
display: flex;
flex-direction: row;
align-items: center;
}
становится таким:
.App {
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;
}
Если вам по какой-то причине необходимо отключить автопрефикс, следуйте этому разделу.
Как правило, мы рекомендуем не использовать одни и те же классы CSS в разных компонентах. Например, вместо использования класса CSS .Button в компонентах <AcceptButton> и <RejectButton>, мы рекомендуем создать компонент <Button> со своими собственными стилями .Button, которые могут отображать оба компонента <AcceptButton> и <RejectButton> (но не наследуют).
Следование этому правилу часто делает препроцессоры CSS менее полезными, поскольку такие функции, как миксины и вложенность, заменяются композицией компонентов. Однако вы можете интегрировать препроцессор CSS, если считаете его полезным. В этом руководстве мы будем использовать Sass, но вы также можете использовать Less или другую альтернативу.
Сначала установим интерфейс командной строки для Sass:
npm install --save node-sass-chokidar
Или вы можете использовать yarn:
yarn add node-sass-chokidar
Затем в package.json добавьте следующие строки в scripts:
"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",
"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",
Это позволит вам делать такие импорты, как
@import 'styles/_colors.scss'; // предполагая наличие каталога styles в src/
@import 'nprogress/nprogress'; // импорт файла css из модуля узла nprogress
На этом этапе вы, возможно, захотите удалить все файлы CSS из системы контроля версий и добавить src/**/*.css в свой файл .gitignore. Как правило, рекомендуется хранить продукты сборки вне системы контроля версий.
В качестве последнего шага вы можете найти удобным запуск watch-css автоматически. Использование npm start и build-css как части npm run build. Выполнение двух скриптов последовательно с помощью оператора &&. Установка пакета для параллельного выполнения:
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-chokidar решает эти проблемы.
В Webpack использование статических ресурсов, таких как изображения и шрифты, работает аналогично CSS.
Можно импортировать файл прямо в модуль JavaScript. Это говорит Webpack включить этот файл в пакет. В отличие от импорта CSS, импорт файла даёт строковое значение. Это значение является окончательным путём, который можно использовать в коде, например, как атрибут src изображения или href ссылки на PDF.
Для уменьшения количества запросов к серверу импорт изображений размером менее 10 000 байт возвращает URI данных вместо пути. Это относится к следующим расширениям файлов: bmp, gif, jpg, jpeg и png. Файлы SVG исключены из-за проблем с их обработкой.
Вот пример:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
Это гарантирует, что при сборке проекта Webpack правильно переместит изображения в папку сборки и предоставит нам правильные пути.
То же самое работает и в CSS:
.Logo {
background-image: url(./logo.png);
}
Webpack находит все относительные ссылки модулей в CSS (они начинаются с ./) и заменяет их окончательными путями из скомпилированного пакета. Если вы сделаете опечатку или случайно удалите важный файл, вы увидите ошибку компиляции, как при импорте несуществующего модуля JavaScript. Окончательные имена файлов в скомпилированном пакете генерируются Webpack на основе хэшей содержимого. Если содержимое файла изменится в будущем, Webpack даст ему другое имя в продакшене, поэтому вам не нужно беспокоиться о долгосрочном кэшировании активов.
Обратите внимание, что это также пользовательская функция Webpack.
Это не обязательно для React, но многим людям нравится эта функция (и React Native использует аналогичный механизм для изображений).
Альтернативный способ обработки статических активов описан в следующем разделе.
Примечание: эта функция доступна с react-scripts@0.5.0 и выше.
Папка public содержит HTML-файл, который вы можете настроить, например, чтобы установить заголовок страницы. Во время сборки автоматически добавляется тег <script> со скомпилированным кодом. Добавление ресурсов вне системы модулей
Вы также можете добавлять другие ресурсы в папку public.
Обратите внимание, что обычно мы рекомендуем импортировать ресурсы в файлы JavaScript. Например, см. разделы о добавлении таблицы стилей и добавлении изображений, шрифтов и файлов.
Этот механизм предоставляет ряд преимуществ:
Однако есть обходной путь, который вы можете использовать для добавления ресурса вне системы модулей.
Если вы поместите файл в папку public, он не будет обработан Webpack. Вместо этого он будет скопирован в папку сборки без изменений. Чтобы ссылаться на ресурсы в папке public, вам необходимо использовать специальную переменную с именем PUBLIC_URL.
Внутри index.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 после неё.
Вам не обязательно использовать React Bootstrap вместе с React, но это популярная библиотека для интеграции Bootstrap с приложениями React. Если она вам нужна, вы можете интегрировать её с Create React App, выполнив следующие действия:
Установите React Bootstrap и Bootstrap из npm. React Bootstrap не включает CSS Bootstrap, поэтому его необходимо установить отдельно. Установлено также:
npm install --save react-bootstrap bootstrap@3
Альтернативно вы можете использовать yarn:
yarn add react-bootstrap bootstrap@3
Импортируйте Bootstrap CSS и, опционально, Bootstrap theme CSS в начале файла src/index.js:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
// Поместите все остальные импорты ниже, чтобы стили из ваших
// компонентов имели приоритет над стандартными стилями.
Импортируйте необходимые компоненты React Bootstrap в файл src/App.js или файлы ваших пользовательских компонентов:
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
Теперь вы готовы использовать импортированные компоненты React Bootstrap в иерархии компонентов, определённой в методе рендеринга. Вот пример файла App.js, переделанный с использованием React Bootstrap.
Иногда вам может потребоваться настроить визуальные стили Bootstrap (или эквивалентного пакета). Мы предлагаем следующий подход:
Вот пример добавления настроенного Bootstrap, который следует этим шагам.
Flow — это статический анализатор типов, который помогает писать код с меньшим количеством ошибок. Ознакомьтесь с этой статьёй о статических типах в JavaScript, если вы новичок в этой концепции.
Последние версии Flow работают с проектами Create React App «из коробки».
Чтобы добавить Flow в проект Create React App, выполните следующие действия:
npm install --save flow-bin (или yarn add flow-bin)."flow": "flow" в раздел scripts файла package.json.npm run flow init (или yarn flow init), чтобы создать файл .flowconfig в корневом каталоге.// @flow к любым файлам, которые вы хотите проверить (например, к src/App.js).Теперь можно запустить npm run flow (или yarn flow) для проверки файлов на наличие ошибок типа.
Вы можете дополнительно использовать IDE, такую как 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 и замените его любым примером с его веб-сайта. Базовый пример — хорошее место для начала.
Обратите внимание, что вам может потребоваться настроить сервер для поддержки маршрутизации на стороне клиента перед развёртыванием приложения.
Примечание: эта функция доступна с
react-scripts@0.2.3и выше.
Ваш проект может использовать переменные, объявленные в вашей среде, как если бы они были объявлены локально в ваших JS-файлах. По умолчанию у вас будет определён NODE_ENV, а также любые другие переменные среды, начинающиеся с REACT_APP_.
Переменные окружения встраиваются во время сборки. Поскольку Create React App создаёт статический HTML/CSS/JS-пакет, он не может прочитать их во время выполнения. Чтобы прочитать их во время выполнения, вам нужно будет загрузить HTML в память на сервере и заменить заполнители во время выполнения, как описано в документации. Здесь (#injecting-data-from-the-server-into-the-page) вы можете перестраивать приложение на сервере каждый раз, когда вносите изменения.
Примечание: необходимо создавать пользовательские переменные среды, начинающиеся с
REACT_APP_. Любые другие переменные, кромеNODE_ENV, будут игнорироваться, чтобы случайно не раскрыть закрытый ключ на машине, которая может иметь такое же имя (https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). Изменение любых переменных среды потребует перезапуска сервера разработки, если он запущен.
Эти переменные среды будут определены для вас в 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>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</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>You are running this application in <b>development</b> mode.</small>
<form>
<input type="hidden" value="abcdef" />
</form>
</div>
Вышеупомянутая форма ищет переменную с именем REACT_APP_SECRET_CODE из среды. Чтобы использовать это значение, мы должны определить его в среде. Это можно сделать двумя способами: либо в вашей оболочке, либо в файле .env. Оба этих способа описаны в следующих разделах.
Доступ к NODE_ENV также полезен для выполнения действий условно:
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
При компиляции приложения с помощью npm run build шаг минификации удалит это условие, и результирующий пакет будет меньше.
Примечание: эта функция доступна с
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
(Примечание: кавычки вокруг присвоения переменной обязательны, чтобы избежать пробела в конце.)
Глобальная функция fetch позволяет легко выполнять AJAX-запросы. Она принимает URL в качестве входных данных и возвращает Promise, который разрешается в объект Response. Вы можете найти дополнительную информацию о fetch здесь.
Этот проект также включает полифилл для Promise [https://github.com/then/promise], который предоставляет полную реализацию Promises/A+. Promise представляет конечный результат асинхронной операции, вы можете найти больше информации о Promises [здесь] (https://www.promisejs.org/) и здесь. И axios, и fetch() используют Promises под капотом. Вы также можете использовать синтаксис async / await [https://davidwalsh.name/async-await], чтобы уменьшить вложенность обратных вызовов.
Вы можете узнать больше о выполнении AJAX-запросов из компонентов React в записи часто задаваемых вопросов на веб-сайте React [https://reactjs.org/docs/faq-ajax.html].
Эти руководства помогут вам интегрировать ваше приложение с серверной частью API, работающей на другом порту, используя fetch() для доступа к ней.
Ознакомьтесь с этим руководством [https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/]. Вы можете найти сопутствующий репозиторий GitHub здесь [https://github.com/fullstackreact/food-lookup-demo].
Ознакомьтесь с этим руководством [https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/]. Вы можете найти сопутствующий репозиторий GitHub здесь [https://github.com/fullstackreact/food-lookup-demo-rails].
Примечание: эта функция доступна в
react-scripts@0.2.3и выше.
Люди часто обслуживают интерфейсное приложение React с того же хоста и порта, что и их бэкенд-реализация. Например, производственная установка может выглядеть следующим образом после развёртывания приложения:
/ - статический сервер возвращает index.html с приложением React
/todos - статический сервер возвращает index.html с приложением React
/api/todos - сервер обрабатывает любые запросы /api/* с помощью бэкэнд-реализации
Такая настройка не требуется. Однако, если у вас есть такая настройка, удобно писать запросы типа fetch('/api/todos') без необходимости перенаправлять их на другой хост или порт во время разработки.
Чтобы указать серверу разработки проксировать любые неизвестные запросы на ваш сервер API в процессе разработки, добавьте поле proxy в свой файл package.json, например:
"proxy": "http://localhost:4000",
Таким образом, когда вы fetch('/api/todos') в процессе разработки, сервер разработки распознает, что это не статический актив, и будет проксировать ваш запрос на http://localhost:4000/api/todos в качестве запасного варианта. Сервер разработки только попытается отправить запросы без text/html в своём заголовке Accept на прокси.
Удобно, что это позволяет избежать проблем с CORS [http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations] и сообщений об ошибках, подобных этому, в процессе разработки:
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-перепривязки. Проблема описана в этой статье и этом выпуске.
Это не должно влиять на вас при разработке на localhost, но если вы разрабатываете удалённо, как описано здесь, то после включения опции proxy в браузере появится такая ошибка:
Invalid Host header
Чтобы обойти её, вы можете указать свой публичный хост разработки в файле с именем .env.development в корне вашего проекта:
HOST=mypublicdevhost.com
Если теперь перезапустить сервер разработки и загрузить приложение с указанного хоста, оно должно работать.
Если у вас всё ещё есть проблемы или вы используете более экзотическую среду, такую как облачный редактор, вы можете полностью обойти проверку хоста, добавив строку в .env.development.local. Обратите внимание, что это опасно и подвергает вашу машину удалённому выполнению кода с вредоносных веб-сайтов:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
Мы не рекомендуем этот подход.
Примечание: эта функция доступна с
react-scripts@1.0.0и выше.
Если опция proxy не достаточно гибкая для вас, вы можете задать объект в следующей форме (в package.json). Вы также можете указать любое значение конфигурации, поддерживаемое http-proxy-middleware или http-proxy.
{
// ...
"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 следует учитывать некоторые дополнительные моменты.
Если вы используете движок WebSocket, такой как Socket.io, у вас должен быть запущен сервер Socket.io, который можно использовать в качестве целевого прокси. Socket.io не будет работать со стандартным сервером WebSocket. В частности, не ожидайте, что Socket.io будет работать с эхо-тестом websocket.org.
Существует хорошая документация по настройке сервера Socket.io.
Стандартные WebSockets будут работать со стандартным WebSocket-сервером, а также с эхо-тестом websocket.org. Вы можете использовать такие библиотеки, как ws для сервера, с собственными WebSockets в браузере.
В любом случае вы можете настроить проксирование запросов WebSocket вручную в package.json:
{
// ...
"proxy": {
"/socket": {
// Ваш код... ## Использование HTTPS в разработке
>Примечание: эта функция доступна с версии `react-scripts@0.4.0` и выше.
Вам может потребоваться, чтобы сервер разработки обслуживал страницы по HTTPS. Один из случаев, когда это может быть полезно — использование функции «прокси» (#Проксирование запросов к API в процессе разработки) для проксирования запросов к серверу API, который сам обслуживает HTTPS.
Чтобы это сделать, установите переменную среды `HTTPS` в значение `true`, затем запустите сервер разработки как обычно с помощью команды `npm start`:
#### Windows (cmd.exe)
```cmd
set HTTPS=true&&npm start
($env:HTTPS = $true) -and (npm start)
(Обратите внимание: отсутствие пробелов является преднамеренным.)
HTTPS=true npm start
Обратите внимание, что сервер будет использовать самозаверяющий сертификат, поэтому ваш веб-браузер почти наверняка отобразит предупреждение при доступе к странице.
<meta> на сервереПоскольку Create React App не поддерживает рендеринг на стороне сервера, вы можете задаться вопросом, как сделать теги <meta> динамическими и отражающими текущий URL. Чтобы решить эту проблему, мы рекомендуем добавить заполнители в HTML, например так:
<!doctype html>
<html lang="en">
<head>
<meta property="og:title" content="__OG_TITLE__">
<meta property="og:description" content="__OG_DESCRIPTION__">
Затем на сервере, независимо от используемого вами бэкенда, вы можете прочитать index.html в память и заменить __OG_TITLE__, __OG_DESCRIPTION__ и любые другие заполнители значениями в зависимости от текущего URL. Просто убедитесь, что вы дезинфицируете и экранируете интерполированные значения, чтобы они были безопасны для встраивания в HTML!
Если вы используете сервер Node, вы даже можете поделиться логикой сопоставления маршрутов между клиентом и сервером. Однако дублирование также хорошо работает в простых случаях.
Если вы размещаете свой build у провайдера статического хостинга, вы можете использовать react-snapshot или react-snap, чтобы создать HTML-страницы для каждого маршрута или относительной ссылки в вашем приложении. Эти страницы затем будут плавно активироваться или «гидратироваться», когда пакет JavaScript загрузится.
Также есть возможность использовать это вне статического хостинга, чтобы снять нагрузку с сервера при генерации и кэшировании маршрутов.
Основное преимущество предварительного рендеринга заключается в том, что вы получаете основной контент каждой страницы с полезной нагрузкой HTML — независимо от того, успешно ли загружается ваш пакет JavaScript. Это также увеличивает вероятность того, что каждый маршрут вашего приложения будет обнаружен поисковыми системами.
Вы можете узнать больше о предварительном рендеринге с нулевой конфигурацией (также называемом моментальным снимком) здесь.
Аналогично предыдущему разделу, вы можете оставить некоторые заполнители в HTML для внедрения глобальных переменных, например:
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
Затем на сервере вы можете заменить __SERVER_DATA__ на JSON реальных данных прямо перед отправкой ответа. Клиентский код может затем прочитать window.SERVER_DATA, чтобы использовать его. Обязательно проведите дезинфекцию JSON перед отправкой клиенту, поскольку это делает ваше приложение уязвимым для XSS-атак.
Примечание: эта функция доступна с версии
react-scripts@0.3.0и выше.
[Ознакомьтесь с руководством по миграции, чтобы узнать, как включить её в более старых версиях. Проекты!
Create React App использует Jest в качестве тестового раннера. Чтобы подготовиться к этой интеграции, мы провели масштабное обновление Jest, так что если вы слышали о нём плохие вещи несколько лет назад, попробуйте ещё раз.
Jest — это раннер на основе Node. Это означает, что тесты всегда выполняются в среде Node, а не в реальном браузере. Это позволяет нам ускорить итерацию и предотвратить нестабильность.
Хотя Jest предоставляет глобальные переменные браузера, такие как window, благодаря jsdom, они являются лишь приближением к реальному поведению браузера. Jest предназначен для использования в модульных тестах вашей логики и компонентов, а не для проверки DOM-особенностей.
Мы рекомендуем использовать отдельный инструмент для браузерных сквозных тестов, если они вам нужны. Они выходят за рамки Create React App.
Jest будет искать тестовые файлы с любым из следующих популярных соглашений об именовании:
Файлы .test.js / .spec.js (или папки tests) могут находиться на любой глубине под верхней папкой src.
Рекомендуется размещать тестовые файлы (или папки tests) рядом с кодом, который они тестируют, чтобы относительные импорты были короче. Например, если App.test.js и App.js находятся в одной папке, тесту просто нужно импортировать App из './App' вместо длинного относительного пути. Совместное размещение также помогает быстрее находить тесты в более крупных проектах.
Когда вы запускаете npm test, Jest запускается в режиме просмотра. Каждый раз, когда вы сохраняете файл, он повторно запускает тесты, точно так же, как npm start перекомпилирует код.
Наблюдатель включает интерактивный интерфейс командной строки с возможностью запускать все тесты или фокусироваться на шаблоне поиска. Он разработан таким образом, чтобы вы могли держать его открытым и наслаждаться быстрыми повторными запусками. Вы можете узнать команды из заметки «Использование часов», которую наблюдатель печатает после каждого запуска:
По умолчанию, когда вы запускаете npm test, Jest будет запускать только тесты, связанные с файлами, изменёнными со времени последнего коммита. Это оптимизация, предназначенная для того, чтобы ваши тесты выполнялись быстро независимо от того, сколько у вас тестов. Однако предполагается, что вы не часто фиксируете код, который не проходит тесты.
Jest всегда явно упоминает, что он запускал только тесты, относящиеся к файлам, изменённым со времени последнего коммита. Вы также можете нажать a в режиме наблюдения, чтобы заставить Jest запустить все тесты.
Jest всегда будет запускать все тесты на сервере непрерывной интеграции или если проект не находится внутри репозитория Git или Mercurial.
Чтобы создать тесты, добавьте блоки it() (или test()) с именем теста и его кодом. При желании вы можете обернуть их в блоки describe() для логической группировки, но это не требуется и не рекомендуется.
Jest предоставляет встроенную глобальную функцию expect() для утверждений. Базовый тест может выглядеть следующим образом:
import sum from './sum';
it('sums numbers', () => {
expect(sum(1, 2)).toEqual(3);
expect(sum(2, 2)).toEqual(4);
});
Все сопоставители expect(), поддерживаемые Jest, подробно описаны здесь. Вы также можете использовать jest.fn() и expect(fn).toBeCalled() для создания «шпионов» или фиктивных функций.
Существует широкий спектр методов тестирования компонентов. Они варьируются от «дымового теста», проверяющего, что компонент отображается без ошибок, до поверхностного рендеринга и тестирования части вывода, до полного рендеринга и проверки жизненного цикла компонента и изменений состояния. Разные проекты выбирают разные компромиссы тестирования в зависимости от того, как часто меняются компоненты и насколько... ``` // Импортируем 'jest-enzyme' import 'jest-enzyme';
// Используем react-testing-library В качестве альтернативы или дополнения к enzyme можно рассмотреть использование react-testing-library. react-testing-library — это библиотека для тестирования React-компонентов способом, который напоминает способ использования компонентов конечными пользователями. Она хорошо подходит для модульного, интеграционного и сквозного тестирования React-компонентов и приложений. Она работает более непосредственно с узлами DOM, поэтому рекомендуется использовать её вместе с jest-dom для улучшенных утверждений.
Чтобы установить react-testing-library и jest-dom, можно выполнить:
npm install --save react-testing-library jest-dom
Или же вы можете использовать yarn:
yarn add react-testing-library jest-dom
Аналогично enzyme вы можете создать файл src/setupTests.js, чтобы избежать шаблонного кода в ваших тестовых файлах:
// react-testing-library отображает ваши компоненты в document.body,
// это гарантирует их удаление после каждого теста.
import 'react-testing-library/cleanup-after-each';
// Это добавляет пользовательские утверждения jest-dom.
import 'jest-dom/extend-expect';
Вот пример использования react-testing-library и jest-dom для проверки того, что компонент отображает «Welcome to React».
import React from 'react';
import { render } from 'react-testing-library';
import App from './App';
it('renders welcome message', () => {
const { getByText } = render(<App />);
expect(getByText('Welcome to React')).toBeInTheDOM();
});
Подробнее об утилитах, предоставляемых react-testing-library для облегчения тестирования асинхронных взаимодействий, а также о выборе элементов формы, можно узнать из документации по react-testing-library (https://github.com/kentcdodds/react-testing-library) и примеров (https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples).
Мы рекомендуем использовать expect() для утверждений и jest.fn() для шпионов. Если у вас возникли проблемы с ними, пожалуйста, создайте их в Jest (https://github.com/facebook/jest/issues/new), и мы исправим их. Мы намерены продолжать улучшать их для React, поддерживая, например, красивую печать элементов React как JSX (https://github.com/facebook/jest/pull/1566).
Однако, если вы привыкли к другим библиотекам, таким как Chai (http://chaijs.com/) и Sinon (http://sinonjs.org/), или если у вас есть существующий код, использующий их, который вы хотели бы перенести, вы можете импортировать их обычным образом:
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
Примечание: Имейте в виду, что если вы решите «извлечь» перед созданием src/setupTests.js, полученный файл package.json не будет содержать никаких ссылок на него, поэтому вам следует вручную создать свойство setupTestFrameworkScriptFile в конфигурации для Jest, примерно так:
"jest": { // ... "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js" }
Вы можете заменить it() на xit(), чтобы временно исключить тест из выполнения. Точно так же fit() позволяет вам сосредоточиться на конкретном тесте без запуска каких-либо других тестов.
У Jest есть встроенный репортер покрытия, который хорошо работает с ES6 и не требует настройки. Запустите npm test -- --coverage (обратите внимание на дополнительные -- в команде). middle) to include a coverage report like this:
Покрытие отчета
Обратите внимание, что тесты выполняются гораздо медленнее с покрытием, поэтому рекомендуется запускать их отдельно от обычного рабочего процесса.
Конфигурацию покрытия по умолчанию Jest можно переопределить, добавив любой из следующих поддерживаемых ключей в конфигурацию Jest в вашем package.json.
Поддерживаемые переопределения:
Пример package.json:
{
"name": "your-package",
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!<rootDir>/node_modules/",
"!<rootDir>/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.yml в свой git-репозиторий.language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Следуйте этой статье, чтобы настроить CircleCI с проектом Create React App.
set CI=true&&npm test
set CI=true&&npm run build
(Обратите внимание: отсутствие пробелов является преднамеренным.)
($env:CI = $true) -and (npm test)
($env:CI = $true) -and (npm run build)
CI=true npm test
CI=true npm run build
Команда test заставит Jest запустить тесты один раз вместо запуска наблюдателя.
Если вы обнаружите, что часто делаете это в процессе разработки, пожалуйста, создайте проблему, чтобы сообщить нам о вашем сценарии использования, потому что мы хотим сделать работу наблюдателя максимально удобной и открыты для изменения его работы, чтобы приспособить больше рабочих процессов.
Команда build проверит наличие предупреждений линтера и завершится неудачно, если они будут обнаружены.
По умолчанию файл package.json сгенерированного проекта выглядит следующим образом:
"scripts": {
"start": "react-scripts start",
"build": "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": Реакт-скрипты тест
Чтобы помочь вам принять решение, вот список API, которым **нужен jsdom**:
* Любые глобальные переменные браузера, такие как `window` и `document`.
* [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render).
* [`TestUtils.renderIntoDocument()`](https://facebook.github.io/react/docs/test-utils.html#renderintodocument) ([ярлык](https://github.com/facebook/react/blob/34761cf9a252964abfaab6faf74d473ad95d1f21/src/test/ReactTestUtils.js#L83-L91) для предыдущего).
* [`mount()`](http://airbnb.io/enzyme/docs/api/mount.html) в [Enzyme](http://airbnb.io/enzyme/index.html).
В отличие от этого, **jsdom не нужен** для следующих API:
* [`TestUtils.createRenderer()`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) (мелкозернистый рендеринг).
* [`shallow()`](http://airbnb.io/enzyme/docs/api/shallow.html) в [Enzyme](http://airbnb.io/enzyme/index.html).
Наконец, jsdom также не требуется для [тестирования снимков](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
### Тестирование снимков
Тестирование снимков — это функция Jest, которая автоматически генерирует текстовые снимки ваших компонентов и сохраняет их на диске, чтобы при изменении вывода пользовательского интерфейса вы получали уведомление без ручного написания каких-либо утверждений о выводе компонента. [Подробнее о тестировании снимков.](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html)
### Интеграция с редактором
Если вы используете [Visual Studio Code](https://code.visualstudio.com), существует [расширение Jest](https://github.com/orta/vscode-jest), которое работает с Create React App «из коробки». Это предоставляет множество функций, подобных IDE, при использовании текстового редактора: отображение статуса тестового запуска с потенциальными сообщениями об ошибках в строке, автоматический запуск и остановка наблюдателя, а также предложение обновлений моментальных снимков одним щелчком мыши.
## Отладка тестов
Существуют различные способы настройки отладчика для ваших тестов Jest. Мы рассмотрим отладку в Chrome и [Visual Studio Code](https://code.visualstudio.com/).
>Примечание: для отладки тестов требуется Node 8 или выше.
### Отладка тестов в Chrome
Добавьте следующее в раздел `scripts` вашего проекта `package.json`:
```json
"scripts": {
"test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom"
}
Поместите операторы debugger; в любой тест и запустите:
$ npm run test:debug
Это запустит выполнение ваших тестов Jest, но приостановит перед выполнением, чтобы позволить отладчику подключиться к процессу.
Откройте следующее в Chrome:
about:inspect
После открытия этой ссылки будут отображены инструменты разработчика Chrome. Выберите inspect в вашем процессе, и точка останова будет установлена на первой строке скрипта реакции (это делается просто для того, чтобы дать вам время открыть инструменты разработчика и предотвратить выполнение Jest до того, как у вас появится такая возможность). Нажмите кнопку, которая выглядит как кнопка «воспроизведение» в правом верхнем углу экрана, чтобы продолжить выполнение. Когда Jest выполнит тест, содержащий оператор отладчика, выполнение остановится, и вы сможете изучить текущую область видимости и стек вызовов.
Примечание: опция cli
--runInBandгарантирует, что Jest запускает тесты в одном и том же процессе, а не порождает процессы для отдельных тестов. Обычно Jest распараллеливает выполнение тестов между процессами, но трудно отлаживать много процессов одновременно.
Отладка тестов Jest поддерживается «из коробки» для Visual Studio Code.
Используйте следующий файл конфигурации launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}", ## Разработка компонентов по отдельности
Обычно в приложении есть множество UI-компонентов, и каждый из них имеет много разных состояний.
Например, простой компонент кнопки может иметь следующие состояния:
* В обычном состоянии с текстовой меткой.
* В отключённом режиме.
* В состоянии загрузки.
Обычно трудно увидеть эти состояния без запуска примера приложения или некоторых примеров.
Create React App не включает никаких инструментов для этого по умолчанию, но вы можете легко добавить Storybook for React ([источник](https://github.com/storybooks/storybook)) или React Styleguidist ([источник](https://github.com/styleguidist/react-styleguidist)) в свой проект. **Это сторонние инструменты, которые позволяют разрабатывать компоненты и видеть все их состояния отдельно от вашего приложения**.
Вы также можете развернуть свой Storybook или руководство по стилю как статическое приложение. Таким образом, каждый член вашей команды сможет просматривать и проверять различные состояния компонентов пользовательского интерфейса, не запуская серверную часть или создавая учётную запись в вашем приложении.
### Начало работы с Storybook
Storybook — это среда разработки для компонентов пользовательского интерфейса React. Она позволяет просматривать библиотеку компонентов, просматривать разные состояния каждого компонента и интерактивно разрабатывать и тестировать компоненты.
Сначала установите следующий пакет npm глобально:
```sh
npm install -g @storybook/cli
Затем выполните следующую команду в каталоге вашего приложения:
getstorybook
После этого следуйте инструкциям на экране.
Узнайте больше о React Storybook:
Styleguidist объединяет руководство по стилю, где все ваши компоненты представлены на одной странице с документацией по реквизитам и примерами использования, со средой для разработки компонентов по отдельности, похожей на Storybook. В Styleguidist вы пишете примеры в Markdown, где каждый фрагмент кода отображается как живая редактируемая игровая площадка.
Сначала установите Styleguidist:
npm install --save react-styleguidist
В качестве альтернативы вы можете использовать yarn:
yarn add react-styleguidist
Затем добавьте эти скрипты в ваш package.json:
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",
Затем выполните следующую команду в каталоге вашего приложения:
npm run styleguide
После этого следуйте инструкциям на экране.
Узнайте больше о React Styleguidist:
Create React App не предоставляет встроенной функциональности для публикации компонента в npm. Если вы готовы извлечь компонент из своего проекта, чтобы другие люди могли его использовать, мы рекомендуем переместить его в отдельный каталог вне вашего проекта, а затем использовать такой инструмент, как nwb (источник), чтобы подготовить его к публикации.
По умолчанию производственная сборка представляет собой полнофункциональное автономное прогрессивное веб-приложение (PWA).
Прогрессивные веб-приложения работают быстрее и надёжнее, чем традиционные веб-страницы, и обеспечивают привлекательный мобильный опыт:
На мобильных устройствах приложение можно добавить прямо на домашний экран пользователя, включая иконку приложения. Вы также можете повторно привлечь пользователей с помощью веб-push-уведомлений. Это устраняет необходимость в магазине приложений.
Плагин sw-precache-webpack-plugin интегрирован в производственную конфигурацию и позаботится о создании файла сервисного работника, который автоматически предварительно кэширует все ваши локальные активы и обновляет их при развёртывании обновлений. Сервисный работник будет использовать стратегию «кэш в первую очередь» для обработки всех запросов к локальным активам, включая начальный HTML, обеспечивая надёжную скорость работы вашего веб-приложения даже в медленной или ненадёжной сети.
Если вы предпочитаете не включать сервисных работников перед первоначальным развёртыванием в продакшн, удалите вызов registerServiceWorker() из src/index.js.
Если ранее вы включили сервисных работников в своём продакшне и решили отключить их для всех существующих пользователей, вы можете заменить вызов registerServiceWorker() в src/index.js, сначала изменив импорт сервисного работника:
import { unregister } from './registerServiceWorker';
а затем вызвать unregister() вместо этого. После того как пользователь посетит страницу с unregister(), сервисный работник будет удалён. Обратите внимание, что в зависимости от того, как обслуживается /service-worker.js, может потребоваться до 24 часов для аннулирования кеша.
Сервисные работники требуют HTTPS, хотя для облегчения локального тестирования эта политика не применяется к localhost. Если ваш производственный веб-сервер не поддерживает HTTPS, регистрация сервисного работника завершится неудачно, но остальная часть вашего веб-приложения останется функциональной.
Сервисные работники в настоящее время не поддерживаются во всех веб-браузерах. Регистрация сервисного работника не будет предпринята в браузерах, которые не поддерживают эту функцию.
Сервисный работник включается только в производственной среде, например, в результате выполнения команды npm run build. Рекомендуется не включать автономного первого сервисного работника в среде разработки, так как это может привести к разочарованию, когда ранее кэшированные активы используются и не включают последние изменения, внесённые вами локально.
Если вам необходимо протестировать своего автономного первого сервисного работника локально, соберите приложение (используя npm run build) и запустите простой HTTP-сервер из каталога сборки. После запуска скрипта сборки create-react-app даст инструкции по одному способу тестирования вашей рабочей сборки локально, а инструкции по развёртыванию содержат инструкции по использованию других методов. Обязательно всегда используйте окно инкогнито, чтобы избежать проблем с кэшем браузера.
При возможности настройте свою производственную среду так, чтобы сгенерированный файл service-worker.js обслуживался без HTTP-кэширования. Если это невозможно — например, GitHub Pages не позволяет вам изменить стандартное время жизни HTTP-кеша в 10 минут — то имейте в виду, что если вы посетите свой рабочий сайт, а затем снова посетите его до истечения срока действия service-worker.js из вашего HTTP-кэша, вы будете продолжать получать ранее кэшированные ресурсы от сервисного работника. Если у вас есть немедленная потребность просмотреть обновлённое рабочее развёртывание, выполнение сдвига-обновления временно отключит сервисный работник. Сервис воркер и получение всех активов из сети
Пользователи не всегда знакомы с веб-приложениями, ориентированными на работу в офлайн-режиме. Может быть полезно дать пользователю знать, когда сервисный работник заполнил кэш (показывая сообщение «Это веб-приложение работает в автономном режиме!»), а также сообщить ему, когда сервисный работник получил последние обновления, которые будут доступны при следующей загрузке страницы (показывая сообщение «Доступен новый контент; обновите страницу»). Показ этих сообщений сейчас оставлен на усмотрение разработчика, но в качестве отправной точки вы можете использовать логику, включенную в src/registerServiceWorker.js, которая демонстрирует, какие события жизненного цикла сервисного работника нужно отслеживать для обнаружения каждого сценария, и которая по умолчанию просто регистрирует соответствующие сообщения в консоли JavaScript.
По умолчанию сгенерированный файл сервисного работника не будет перехватывать или кэшировать любой междоменный трафик, такой как HTTP-запросы API (#интеграция с серверной частью API), изображения или вставки, загруженные с другого домена. Если вы хотите использовать стратегию кэширования во время выполнения для этих запросов, вы можете выполнить eject (#npm run eject), а затем настроить опцию runtimeCaching в разделе SWPrecacheWebpackPlugin файла webpack.config.prod.js.
Конфигурация по умолчанию включает манифест веб-приложения, расположенный в public/manifest.json, который можно настроить с учётом особенностей вашего веб-приложения. Когда пользователь добавляет веб-приложение на свой домашний экран с помощью Chrome или Firefox на Android, метаданные в manifest.json определяют, какие значки, имена и цвета брендинга использовать при отображении веб-приложения. Руководство по манифесту веб-приложений предоставляет больше информации о том, что означает каждое поле, и о том, как ваши настройки повлияют на опыт ваших пользователей.
Source map explorer анализирует пакеты JavaScript с использованием исходных карт. Это помогает вам понять, откуда происходит раздувание кода.
Чтобы добавить Source map explorer в проект 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, самый простой способ справиться с этим — установить serve и позволить ему обрабатывать остальное:
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();
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 с browserHistory), многие серверы статических файлов будут работать некорректно. Например, если вы использовали React Router с маршрутом для /todos/42, сервер разработки будет правильно отвечать на localhost:3000/todos/42, но Express, обслуживающий производственную сборку, как указано выше, не будет.
Это связано с тем, что при новой загрузке страницы для /todos/42 сервер ищет файл build/todos/42 и не находит его. Сервер необходимо настроить так, чтобы он отвечал на запрос к /todos/42, обслуживая index.html. Например, мы можем изменить наш пример Express, чтобы обслуживать index.html для любых неизвестных путей:
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 конфигурации плагина SWPreachePlugin конфигурации.
Когда пользователи установят ваше приложение на домашний экран своего устройства, по умолчанию конфигурация создаст ярлык для /index.html. Это может не работать для маршрутизаторов на стороне клиента, которые ожидают, что приложение будет обслуживаться из /. Измените веб-приложение манифеста в public/manifest.json и измените start_url, чтобы он соответствовал требуемой схеме URL, например:
"start_url": ".",
По умолчанию Create React App создаёт сборку, предполагая, что ваше приложение размещено в корне сервера. Чтобы переопределить это, укажите homepage в вашем package.json, например:
"homepage": "http://mywebsite.com/relativepath",
Это позволит Create React App правильно определить корневой путь, который будет использоваться в сгенерированном HTML-файле.
Примечание: Если вы используете react-router@^4, вы можете задать корень <Link> с помощью свойства basename на любом <Router>. Подробнее. Для загрузки...
Загрузка: [============================== ] 75%✔ хостинг: папка сборки успешно загружена
✔ хостинг: 8 файлов успешно загружены
я начинаю процесс выпуска (это может занять несколько минут)...
✔ развёртывание завершено!
Консоль проекта: https://console.firebase.google.com/project/example-app-fd690/overview
Хостинг URL: https://example-app-fd690.firebaseapp.com
Для получения дополнительной информации см. «Добавление Firebase в ваш проект JavaScript» (https://firebase.google.com/docs/web/setup).
### GitHub Pages (https://pages.github.com/)
>Примечание: эта функция доступна с `react-scripts@0.2.0` и выше.
#### Шаг 1: Добавьте `homepage` в `package.json`
**Следующий шаг важен!**<br>
**Если вы его пропустите, ваше приложение будет развёрнуто неправильно.**
Откройте свой `package.json` и добавьте поле `homepage` для своего проекта:
```json
"homepage": "https://myusername.github.io/my-app",
или для страницы пользователя GitHub:
"homepage": "https://myusername.github.io",
Create React App использует поле homepage, чтобы определить корневой URL в созданном HTML-файле.
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.
Если вы развёртываете страницу пользователя вместо страницы проекта, вам потребуется внести два дополнительных изменения:
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 установлен флажок «GitHub Pages», чтобы использовать ветку gh-pages:
Вы можете настроить собственный домен с помощью GitHub Pages, добавив файл CNAME в папку public/.
GitHub Pages не поддерживает маршрутизаторы, которые используют HTML5 pushState history 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. Подробное объяснение этой техники вы можете найти в этом руководстве (https://github.com/rafrex/spa-github-pages). Устранение неполадок
/dev/tty: No such a device or address
Если при развёртывании вы получаете сообщение /dev/tty: No such a device or address или аналогичную ошибку, попробуйте следующее:
Heroku Используйте Heroku Buildpack для Create React App. Инструкции можно найти в статье «Deploying React with Zero Configuration».
Устранение ошибок при развёртывании на Heroku Иногда npm run build работает локально, но не удаётся во время развёртывания через Heroku. Вот наиболее распространённые случаи.
«Module not found: Error: Cannot resolve 'file' or 'directory'»
Если вы видите что-то вроде этого:
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: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /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.
Netlify Чтобы выполнить ручное развёртывание на CDN Netlify, выполните следующие действия:
npm install netlify-cli -g
netlify deploy
Выберите build в качестве пути для развёртывания.
Чтобы настроить непрерывную доставку: С этой настройкой Netlify будет собирать и развёртывать, когда вы отправляете изменения в Git или открываете запрос на вытягивание:
Поддержка клиентской маршрутизации: Чтобы поддерживать pushState, создайте файл public/_redirects со следующими правилами перезаписи:
/* /index.html 200
Когда вы собираете проект, Create React App поместит содержимое папки public в выходные данные сборки.
Now Now предлагает развёртывание с нулевой конфигурацией и одной командой. Вы можете использовать now для бесплатного развёртывания своего приложения.
Установите инструмент командной строки now либо через рекомендуемый настольный инструмент, либо через node с помощью npm install -g now.
Соберите приложение, выполнив npm run build.
Перейдите в каталог сборки, выполнив cd build.
Запустите now --name your-project-name из каталога сборки. В выводе вы увидите URL now.sh, например:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Вставьте этот URL в браузер после завершения сборки, и вы увидите развёрнутое приложение. Подробности доступны в этой статье.
S3 и CloudFront См. этот блог о том, как развернуть ваше React-приложение на Amazon Web Services S3 и CloudFront.
Surge
Установите Surge CLI, если... Вы ещё не сделали этого, запустив npm install -g surge. Запустите команду surge и войдите в систему или создайте новую учетную запись.
Когда вас спросят о пути к проекту, обязательно укажите папку build, например:
project path: /path/to/project/build
Обратите внимание, что для поддержки маршрутизаторов, использующих API HTML5 pushState, вы можете захотеть переименовать index.html в папке сборки в 200.html, прежде чем развертывать его в Surge. Это гарантирует, что каждый URL будет возвращаться к этому файлу.
Вы можете настроить различные параметры разработки и производства, установив переменные среды в вашей оболочке или с помощью .env.
| Переменная | Разработка | Производство | Использование |
|---|---|---|---|
| BROWSER | |
|
По умолчанию Create React App откроет браузер по умолчанию, отдавая предпочтение Chrome на macOS. Укажите браузер, чтобы переопределить это поведение, или установите значение none, чтобы полностью отключить его. Если вам нужно настроить способ запуска браузера, вы можете указать сценарий узла вместо этого. Любые аргументы, переданные в npm start, также будут переданы этому сценарию, а URL-адрес, где обслуживается ваше приложение, будет последним аргументом. Имя файла вашего скрипта должно иметь расширение .js. |
| HOST | |
|
По умолчанию веб-сервер разработки привязывается к localhost. Вы можете использовать эту переменную, чтобы указать другой хост. |
| PORT | |
|
По умолчанию сервер разработки попытается прослушать порт 3000 или предложит вам попробовать следующий доступный порт. Вы можете использовать эту переменную для указания другого порта. |
| HTTPS | |
|
Когда установлено значение true, Create React App будет запускать сервер разработки в режиме https. |
| PUBLIC_URL | |
|
Create React App предполагает, что ваше приложение размещено в корне сервера хостинга или в подпути, как указано в package.json (homepage). Обычно Create React App игнорирует имя хоста. Вы можете использовать эту переменную, чтобы заставить ресурсы ссылаться на предоставленный вами URL (включая имя хоста). Это может быть особенно полезно при использовании CDN для размещения вашего приложения. |
| CI | |
|
При значении true Create React App обрабатывает предупреждения как сбои в сборке. Он также делает тестовый бегун не следящим. Большинство CI устанавливают этот флаг по умолчанию. |
| REACT_EDITOR | |
|
Когда приложение аварийно завершает работу в процессе разработки, вы увидите ошибку с интерактивным стеком вызовов. Когда вы нажимаете на него, Create React App попытается определить редактор, который вы используете, на основе текущих запущенных процессов, и откроет соответствующий исходный файл. Вы можете отправить запрос на извлечение, чтобы обнаружить выбранный вами редактор. Установка этой переменной среды переопределяет автоматическое обнаружение. Если вы это сделаете, убедитесь, что ваша системная переменная PATH указывает на папку bin вашего редактора. Вы также можете установить для неё значение none, чтобы полностью её отключить. |
| CHOKIDAR_USEPOLLING | |
|
При установке значения true наблюдатель работает в режиме опроса, если это необходимо внутри виртуальной машины. Используйте эту опцию, если npm start не обнаруживает изменения. |
| GENERATE_SOURCEMAP | |
|
Если установлено значение false, исходные карты не создаются для производственной сборки. Это решает проблемы OOM на некоторых небольших машинах. |
| NODE_PATH | |
|
То же, что и NODE_PATH в Node.js, но разрешены только относительные папки. Может пригодиться для эмуляции настройки монорепозитория путём установки NODE_PATH=src. |
npm start не определяет измененияЕсли вы сохраняете файл во время работы npm start, браузер должен обновиться с обновлённым кодом.
Если этого не происходит, попробуйте один из следующих способов устранения неполадок: Вам нужно импортировать его явно.
Например:
import moment from 'moment';
import 'moment/locale/fr';
Если вы импортируете несколько локалей таким образом, вы можете позже переключаться между ними, вызывая moment.locale() с именем локали:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
// ...
moment.locale('fr');
Это будет работать только для локалей, которые были явно импортированы ранее.
Некоторые сторонние пакеты не компилируют свой код в ES5 перед публикацией в npm. Это часто вызывает проблемы в экосистеме, потому что ни браузеры (за исключением большинства современных версий), ни некоторые инструменты в настоящее время не поддерживают все функции ES6. Мы рекомендуем публиковать код на npm как ES5 по крайней мере ещё несколько лет.
Чтобы решить эту проблему:
module в package.json. Обратите внимание, что даже если библиотека предоставляет версию модулей ES, она всё равно должна предварительно компилировать другие функции ES6 в ES5, если она намерена поддерживать старые браузеры.src/ и рассматривайте её как код приложения.В будущем мы можем начать автоматически компилировать несовместимые сторонние модули, но в настоящее время это не поддерживается. Такой подход также замедлит производственные сборки.
Извлечение (#npm run eject) позволяет настроить что угодно, но с этого момента вы должны поддерживать конфигурацию и скрипты самостоятельно. Это может быть сложно, если у вас много похожих проектов. В таких случаях вместо извлечения мы рекомендуем форкнуть react-scripts и любые другие необходимые вам пакеты. Эта статья подробно рассказывает, как это сделать. Вы можете найти больше обсуждений в этой проблеме.
Если у вас есть идеи для других рецептов «Как сделать», которые должны быть на этой странице, дайте нам знать или внесите свой вклад!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарий ( 0 )