yuri admin
1.0.0
Это решение для управления промежуточным и бэкэндом, основанное на React+React-router4+an�td3.
Среднее и серверное решение, основанное на React+react-router+antd, готовое к использованию «из коробки», с нулевой настройкой и просто поддерживающее json.
Этот проект был запущен с помощью приложения Create React.
Ниже вы найдете некоторую информацию о том, как выполнять типичные задачи.
Вы можете найти самую последнюю версию этого руководства здесь.
<title>public папкиpublic папку.env<meta> на сервереnpm start не обнаруживает измененийnpm test зависает на macOS Sierranpm run build слишком раноnpm run build на Herokunpm run build не может минимизироватьПриложение Create React разделено на два пакета:
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 . Для более быстрой перестройки Webpack обрабатывает только файлы внутри src .
Вам нужно поместить любые файлы JS и CSS в src , иначе Webpack их не увидит.
Из public/index.html можно использовать только файлы внутри public .
Прочтите инструкции ниже по использованию ресурсов JavaScript и HTML.
Однако вы можете создать больше каталогов верхнего уровня.
Они не будут включены в производственную сборку, поэтому вы можете использовать их, например, для документации.
В каталоге проекта вы можете запустить:
npm start Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница перезагрузится, если вы внесете изменения.
Вы также увидите любые ошибки в консоли.
npm test Запускает тест-раннер в режиме интерактивного просмотра.
Дополнительную информацию см. в разделе о запуске тестов.
npm run build Собирает приложение для производства в папке build .
Он правильно объединяет React в производственном режиме и оптимизирует сборку для достижения наилучшей производительности.
Сборка минимизирована, а имена файлов включают хеши.
Ваше приложение готово к развертыванию!
Дополнительные сведения см. в разделе о развертывании.
npm run eject Примечание: это односторонняя операция. После того как вы eject , вы не сможете вернуться назад!
Если вас не устраивает инструмент сборки и варианты конфигурации, вы можете eject в любое время. Эта команда удалит одну зависимость сборки из вашего проекта.
Вместо этого он скопирует все файлы конфигурации и транзитивные зависимости (Webpack, Babel, ESLint и т. д.) прямо в ваш проект, чтобы вы имели полный контроль над ними. Все команды, кроме eject по-прежнему будут работать, но они будут указывать на файл. скопированные сценарии, чтобы вы могли их настроить. На этом этапе вы можете действовать самостоятельно.
Вам не обязательно использовать eject . Специально подобранный набор функций подходит для небольших и средних развертываний, и вы не должны чувствовать себя обязанным использовать эту функцию. Однако мы понимаем, что этот инструмент не будет полезен, если вы не сможете этого сделать. настройте его, когда будете к этому готовы.
По умолчанию сгенерированный проект использует последнюю версию React.
Вы можете обратиться к документации React для получения дополнительной информации о поддерживаемых браузерах.
Этот проект поддерживает расширенный набор новейшего стандарта JavaScript.
В дополнение к функциям синтаксиса ES6 он также поддерживает:
Узнайте больше о различных этапах предложения.
Хотя мы рекомендуем использовать экспериментальные предложения с некоторой осторожностью, Facebook активно использует эти функции в коде продукта, поэтому мы намерены предоставлять кодовые моды, если какое-либо из этих предложений изменится в будущем.
Обратите внимание, что проект включает лишь несколько полифилов ES6 :
Object.assign() через object-assign .Promise через promise .fetch() через whatwg-fetch . Если вы используете какие-либо другие функции ES6+, требующие поддержки во время выполнения (например, Array.from() или Symbol ), убедитесь, что вы вручную включаете соответствующие полифилы или что браузеры, на которые вы ориентируетесь, уже поддерживают их.
Также обратите внимание, что использование некоторых новых функций синтаксиса, таких как for...of или [...nonArrayValue] приводит к тому, что Babel генерирует код, который зависит от функций среды выполнения ES6 и может не работать без полифила. В случае сомнений используйте Babel REPL, чтобы узнать, что именно. любой конкретный синтаксис компилируется до.
Чтобы настроить подсветку синтаксиса в вашем любимом текстовом редакторе, перейдите на соответствующую страницу документации Babel и следуйте инструкциям. Здесь описаны некоторые из наиболее популярных редакторов.
Примечание. Эта функция доступна в
[email protected]и выше.
Он также работает только с npm 3 или выше.
Некоторые редакторы, включая Sublime Text, Atom и Visual Studio Code, предоставляют плагины для ESLint.
Они не требуются для проверки. Вы должны видеть вывод линтера прямо в своем терминале, а также в консоли браузера. Однако, если вы предпочитаете, чтобы результаты проверки отображались прямо в вашем редакторе, вы можете выполнить некоторые дополнительные действия.
Сначала вам нужно будет установить плагин ESLint для вашего редактора. Затем добавьте файл с именем .eslintrc в корень проекта:
{
"extends" : "react-app"
}Теперь ваш редактор должен сообщить о предупреждениях о линтинге.
Обратите внимание: даже если вы отредактируете файл .eslintrc дальше, эти изменения повлияют только на интеграцию редактора . Они не повлияют на вывод lint в терминале и браузере. Это связано с тем, что приложение Create React намеренно предоставляет минимальный набор правил, которые можно найти. распространенные ошибки.
Если вы хотите обеспечить соблюдение стиля кодирования для своего проекта, рассмотрите возможность использования Prettier вместо правил стиля ESLint.
Эта функция в настоящее время поддерживается только Visual Studio Code и WebStorm.
Visual Studio Code и WebStorm поддерживают отладку «из коробки» с помощью приложения Create React. Это позволяет вам как разработчику писать и отлаживать код 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. См. руководство по устранению неполадок.
Вам потребуется установить расширение Chrome WebStorm и JetBrains IDE Support.
В меню 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 prettierhusky позволяет легко использовать githooks, как если бы это были скрипты npm.lint-staged позволяет нам запускать сценарии для проиндексированных файлов в git. Дополнительную информацию о lint-staged можно найти в этой статье.prettier — это форматировщик JavaScript, который мы будем запускать перед фиксацией. Теперь мы можем убедиться, что каждый файл отформатирован правильно, добавив несколько строк в 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}" чтобы впервые отформатировать весь проект.
Затем вы можете интегрировать Prettier в свой любимый редактор. Прочтите раздел «Интеграция редактора» на странице Prettier GitHub.
<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 .
Например:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;Помните о разнице между экспортом по умолчанию и именованным экспортом. Это распространенный источник ошибок.
Мы предлагаем вам использовать импорт и экспорт по умолчанию, когда модуль экспортирует только одну вещь (например, компонент). Это то, что вы получаете, когда используете export default Button и import Button from './Button' .
Именованный экспорт полезен для служебных модулей, которые экспортируют несколько функций. Модуль может иметь не более одного экспорта по умолчанию и столько именованных экспортов, сколько вам нужно.
Узнайте больше о модулях ES6:
Вместо загрузки всего приложения до того, как пользователи смогут его использовать, разделение кода позволяет разделить код на небольшие фрагменты, которые затем можно загружать по требованию.
Эта настройка проекта поддерживает разделение кода с помощью динамического import() . Его предложение находится на этапе 3. Форма, подобная функции import() принимает имя модуля в качестве аргумента и возвращает Promise которое всегда разрешается в объект пространства имен модуля.
Вот пример:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ 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 : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
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 ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module На этом этапе вы можете удалить все файлы 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 --watch имеет проблемы с производительностью в определенных условиях при использовании на виртуальной машине или с докером.
Бесконечная компиляция стилей # 1939
Сообщается, что node-sass имеет проблемы с обнаружением новых файлов в каталоге № 1891.
Здесь используется node-sass-chokidar поскольку он решает эти проблемы.
В Webpack использование статических ресурсов, таких как изображения и шрифты, работает аналогично CSS.
Вы можете import файл прямо в модуль JavaScript . Это указывает Webpack включить этот файл в пакет. В отличие от импорта CSS, импорт файла дает вам строковое значение. Это значение является конечным путем, на который вы можете ссылаться в своем коде. атрибут src изображения или href ссылки на PDF-файл.
Чтобы уменьшить количество запросов к серверу, при импорте изображений размером менее 10 000 байт вместо пути возвращается URI данных. Это относится к следующим расширениям файлов: файлы bmp, gif, jpg, jpeg и png. из-за #1153.
Вот пример:
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 использует аналогичный механизм для изображений).
Альтернативный способ обработки статических ресурсов описан в следующем разделе.
public папкиПримечание. Эта функция доступна в
[email protected]и выше.
public папка содержит файл HTML, поэтому вы можете настроить его, например, для установки заголовка страницы. Тег <script> с скомпилированным кодом будет добавлен к нему автоматически в процессе сборки.
Вы также можете добавить в public папку другие ресурсы.
Обратите внимание, что вместо этого мы обычно рекомендуем import ресурсы в файлы 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-адресу, отличному от root.
process.env.PUBLIC_URL коде JavaScript вы можете использоватьprocess.env.PUBLIC_URL для аналогичных целей:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
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 не включает Bootstrap CSS, поэтому его также необходимо установить:
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' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. Импортируйте необходимые компоненты 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.
Чтобы узнать больше о Flow, ознакомьтесь с его документацией.
Приложение Create React не предписывает конкретного решения маршрутизации, но React Router является самым популярным.
Чтобы добавить его, запустите:
npm install --save react-router-dom Альтернативно вы можете использовать yarn :
yarn add react-router-dom Чтобы попробовать, удалите весь код в src/App.js и замените его любым из примеров на веб-сайте. Базовый пример — хорошее место для начала.
Обратите внимание: перед развертыванием приложения вам может потребоваться настроить рабочий сервер для поддержки маршрутизации на стороне клиента.
Примечание. Эта функция доступна в
[email protected]и выше.
Ваш проект может использовать переменные, объявленные в вашей среде, как если бы они были объявлены локально в ваших файлах JS. По умолчанию для вас определены NODE_ENV и любые другие переменные среды, начинающиеся с REACT_APP_ .
Переменные среды внедряются во время сборки . Поскольку приложение Create React создает статический пакет 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 > 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 , на этапе минификации это условие будет удалено, и полученный пакет будет меньше.
Примечание. Эта функция доступна в
[email protected]и выше.
Вы также можете получить доступ к переменным среды, начинающимся с 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.envПримечание. Эта функция доступна в
[email protected]и выше.
Чтобы определить постоянные переменные среды, создайте файл с именем .env в корне вашего проекта:
REACT_APP_SECRET_CODE=abcdef
Примечание. Вы должны создать собственные переменные среды, начинающиеся с
REACT_APP_. Любые другие переменные, кромеNODE_ENVбудут игнорироваться, чтобы избежать случайного раскрытия на компьютере закрытого ключа, который может иметь то же имя. Если изменение любых переменных среды потребует перезагрузки сервера разработки. оно работает.
Файлы .env должны быть проверены в системе контроля версий (за исключением .env*.local ).
.env можно использовать?Примечание: эта функция доступна с помощью
[email protected]и выше .
.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 , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (обратите внимание, что .env.local отсутствует) Эти переменные будут действовать как значения по умолчанию, если машина не установит их явно.
Более подробную информацию можно найти в документации dotenv.
Примечание. Если вы определяете переменные среды для разработки, ваша CI и/или хостинговая платформа, скорее всего, также потребуют их определения. Как это сделать, обратитесь к их документации. Например, см. документацию для Travis CI или Heroku.
.envПримечание. Эта функция доступна в
[email protected]и выше.
Разверните переменные, уже имеющиеся на вашем компьютере, для использования в вашем файле .env (с помощью dotenv-expand).
Например, чтобы получить переменную среды npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Или расширить переменные локально для текущего файла .env :
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Многие популярные библиотеки используют декораторы в своей документации.
Создание приложения React не поддерживает синтаксис декоратора в данный момент, потому что:
Однако во многих случаях вы можете переписать код на основе декоратора без декораторов так же хорошо.
Пожалуйста, обратитесь к этим двум потокам для справки:
Приложение Create React добавит поддержку декоратора, когда спецификация продвигается на стабильную стадию.
React не предписывает конкретный подход к извлечению данных, но люди обычно используют либо библиотеку, такую как Axios, или API fetch() fetch() браузером. Беспокойство о поддержке браузера.
Функция Global fetch fetch легко выполнять запросы Response Promise
Этот проект также включает в себя полифил, fetch() обеспечивает полную реализацию обещаний/A+. .. Вы также можете использовать синтаксис async / await чтобы уменьшить гнездование обратного вызова.
Вы можете узнать больше о том, чтобы сделать запросы AJAX из Creact Components в записи FAQ на веб -сайте React.
Эти учебники помогут вам интегрировать ваше приложение с помощью бэкэнда API, работающего на другом порте, используя fetch() для доступа к нему.
Проверьте этот урок.
Проверьте этот урок.
Примечание. Эта функция доступна с
[email protected]и выше.
Люди часто служат приложению React Front-End React от того же хоста и порта, что и их бэкэнд.
Например, настройка производства может выглядеть так после развертывания приложения:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
fetch('/api/todos') настройка не требуется .
Чтобы сообщить серверу разработки прокси -сервера любые неизвестные запросы на ваш API -сервер в разработке, добавьте поле proxy в свой package.json , например:
"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 в производстве. .. Любой непризнанный запрос без text/html Приняв заголовок, будет перенаправлен на указанный proxy .
Параметр proxy поддерживает HTTP, HTTPS и WebSocket Connections.
Если опция proxy не достаточно гибкая для вас, в качестве альтернативы вы можете:
Когда вы включаете опцию proxy , вы выбираете более строгий набор чеков хоста.
Это не должно влиять на вас при разработке на localhost , но если вы разрабатываете удаленно, как описано здесь, вы увидите эту ошибку в браузере после того, как включите опцию proxy :
Неверный заголовок хоста
Чтобы обойти его, вы можете указать свой общественный хост разработки в файле с именем .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
Мы не рекомендуем этот подход.
Примечание. Эта функция доступна с
[email protected]и выше.
Если опция proxy не достаточно гибкая для вас, вы можете указать объект в следующей форме (в package.json ).
Вы также можете указать любое значение конфигурации http-proxy-middleware или http-proxy .
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} Все запросы, соответствующие text/html пути, proxy прокси, без исключений.
Если вам нужно указать несколько прокси, вы можете сделать это, указав дополнительные записи.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}При настройке прокси -сервера WebSocket есть дополнительные соображения, о которых следует знать.
Если вы используете двигатель Websocket, такой как Socket.io, у вас должен быть работа Socket.io, который вы можете использовать в качестве целевого показателя. .io для работы с тестированием ebsocketcocket.org Echo.
Для настройки сервера Socket.io есть хорошая документация.
Standard Websockets будет работать со стандартным сервером Websocket, а также с помощью ECHO -теста websocket.org.
В любом случае, вы можете прокси -запросы WebSocket вручную в package.json :
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} Примечание. Эта функция доступна с
[email protected]и выше.
Вы можете потребовать, чтобы Dev Server обслуживал страницы через HTTPS.
Для этого установите переменную среды HTTPS на true , затем запустите Dev Server как обычно с npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(Примечание: отсутствие пробела является преднамеренным.)
HTTPS=true npm startОбратите внимание, что сервер будет использовать самоописанный сертификат, поэтому ваш веб-браузер почти определенно отобразит предупреждение при доступе к странице.
<meta> на сервере Поскольку приложение Create React не поддерживает рендеринг сервера, вам может быть интересно, как сделать теги <meta> и отражать текущий URL.
<!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!
Если вы используете сервер узлов, вы даже можете поделиться логикой соответствия маршрута между клиентом и сервером.
Если вы размещаете свою build со статическим хостингом, вы можете использовать React-Snapshot или React-Snap для создания HTML-страниц для каждого маршрута или относительной ссылки, в вашем приложении. , когда загрузка пакета JavaScript.
Есть также возможности использовать это за пределами статического хостинга, чтобы снять давление с сервера при генерации и кэшировании маршрутов.
Основное преимущество предварительного разрешения состоит в том, что вы получаете основной контент каждой страницы с помощью полезной нагрузки HTML, независимо от того, успешно ли ваш пакет JavaScript загружается. двигатели.
Вы можете прочитать больше о предварительном использования с нулевой конфигурацией (также называемой снимком) здесь.
Как и в предыдущем разделе, вы можете оставить некоторых заполнителей в HTML, которые вводят глобальные переменные, например:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Затем на сервере вы можете window.SERVER_DATA __SERVER_DATA__ json реальных данных прямо перед отправкой ответа. Ваше приложение уязвимо для атак XSS.
Примечание. Эта функция доступна с
[email protected]и выше.
Прочитайте руководство по миграции, чтобы узнать, как включить его в старых проектах!
Create React App использует Jest в качестве тестового бегуна.
Jest-это бегун на основе узлов.
В то время как Jest предоставляет браузеры, такие как window , благодаря JSDOM, они представляют собой только приближения реального поведения браузера.
Мы рекомендуем вам использовать отдельный инструмент для браузеров, если они вам нужны.
Jest будет искать тестовые файлы с любыми из следующих популярных соглашений об именах:
.js в папках __tests__ ..test.js ..spec.js . Файлы .test.js / .spec.js (или папки __tests__ ) могут быть расположены на любой глубине под папкой верхнего уровня src .
Мы рекомендуем поместить тестовые файлы (или __tests__ папки App.test.js рядом с кодом, App.js они тестируют, так что относительный импорт казался короче. import App from './App' вместо долгого относительного пути.
npm start вы запускаете npm test , Jest будет запущен в режиме наблюдения.
Наблюдатель включает в себя интерактивный интерфейс командной строки с возможностью запуска всех тестов или сосредоточиться на шаблоне поиска. «Смотреть использование». Обратите внимание, что наблюдатель печатает после каждого пробега:
По умолчанию, когда вы запускаете npm test , Jest запустит только тесты, связанные с файлами, с момента последнего коммита. T часто совершают код, который не проходит тесты.
Jest всегда будет a упоминать, что он запускал только тесты, связанные с файлами, измененными с момента последнего коммита.
Jest всегда будет запускать все тесты на сервере непрерывной интеграции или если проект не находится внутри репозитория GIT или Mercurial.
Чтобы создать тесты, добавьте его describe() it() (или test() ) блоки с именем теста и его кода.
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() для создания «шпионов» или макетных функций.
Существует широкий спектр методов тестирования компонентов.
Различные проекты выбирают различные компромиссы тестирования, основываясь на том, как часто изменяются компоненты и какую логику они содержат.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; Этот тест связывает компонент и гарантирует, src/App.test.js он не бросал во время рендеринга. src/App.test.js .
Когда вы сталкиваетесь с ошибками, вызванными изменением компонентов, вы получите более глубокое представление о том, какие части из них заслуживают тестирования в вашем приложении.
Если вы хотите проверить компоненты в изоляции от детских компонентов, которые они визуаливы, мы рекомендуем использовать API shallow() рендеринга из фермента.
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer В качестве альтернативы вы можете использовать yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererПо состоянию на фермент 3 вам нужно будет установить фермент вместе с адаптером, соответствующим версии React, которую вы используете.
Адаптер также должен быть настроен в вашем файле глобальной настройки:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;Примечание. Имейте в виду, что если вы решите «выбросить» перед созданием
src/setupTests.jspackage.jsonполученный файл.
Теперь вы можете написать с ним тест на дым:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; В <App> от предыдущего тестирования дыма с использованием Reactdom.Render <Button> ReactDOM.render() , этот тест только делает <App> и не идет глубже Отлично подходит для изолированных модульных тестов, но вы все равно можете создать некоторые полные тесты на рендеринг mount() чтобы компоненты были правильно интегрированы.
Вы expect() прочитать документацию jest.fn() ферменту для дополнительных методов тестирования.
Вот пример из документации фермента, который утверждает конкретный вывод, переписанный для использования матчеров Jest:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; Все шутливые сопоставления подробно документированы здесь.
Тем не менее вы можете использовать стороннюю библиотеку утверждений, такую как Chai, если хотите, как описано ниже.
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() для шпионов. Например, довольно печатные элементы реагируют как JSX.
Однако, если вы привыкли к другим библиотекам, таким как Chai и Sinon, или если у вас есть существующий код, использующий их, который вы хотели бы перенести, вы можете импортировать их обычно, как это:
import sinon from 'sinon' ;
import { expect } from 'chai' ;а затем используйте их в своих тестах, как обычно.
Примечание. Эта функция доступна с
[email protected]и выше.
Если в вашем приложении используется 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 (обратите внимание на дополнительный -- середине), чтобы включить отчет о покрытии, подобный этим:
Обратите внимание, что тесты работают намного медленнее с покрытием, поэтому рекомендуется запустить его отдельно от обычного рабочего процесса.
Конфигурация покрытия Jest по умолчанию может быть переопределена, добавив любые из следующих поддерживаемых ключей в Jest Config в вашем пакете.
Поддерживается переопределения:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersПример пакета.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 " ]
}
} По CI npm test запускает наблюдатель с помощью интерактивного CLI.
При создании сборки вашего приложения с npm test npm run build Linter предупреждения не проверяются по CI . .
Популярные 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Команда тестирования заставит шутить запускать тесты один раз вместо того, чтобы запустить наблюдателя.
Если вы часто делаете это в разработке, пожалуйста, подайте проблему, чтобы рассказать нам о вашем случае использования, потому что мы хотим сделать наблюдателя лучшим опытом и открыты для изменения того, как он работает для размещения большего количества рабочих процессов.
Команда сборки проверит предупреждения Линтера и не будет сбой, если таковые имеются.
По умолчанию, 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": "react-scripts test"Чтобы помочь вам принять решение, вот список API, которые нуждаются в JSDOM :
window и documentReactDOM.render()TestUtils.renderIntoDocument() (ярлык для вышеизложенного)mount() в ферментеНапротив, JSDOM не требуется для следующих API:
TestUtils.createRenderer() (неглубокий рендеринг)shallow() в ферментеНаконец, JSDOM также не нужна для тестирования снимка.
Тестирование снимка - это функция Jest, которая автоматически генерирует текстовые снимки ваших компонентов и сохраняет их на диске, поэтому, если вывод пользовательского интерфейса меняется, вы получаете уведомление без вручную, не записывая каких -либо утверждений на выводе компонента.
Если вы используете код Visual Studio, существует Jest Advension, которое работает с приложением Create React из коробки. , запустив и останавливая наблюдателя автоматически и предлагает обновления снимка одного клика.
Существуют различные способы настройки отладчика для ваших Jest Tests.
ПРИМЕЧАНИЕ. Тесты отладки требуют узла 8 или выше.
Добавьте следующее в раздел scripts в package.json вашего проекта.
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} Поместить debugger;
$ npm run test:debugЭто начнет запускать ваши Jest -тесты, но остановится перед выполнением, чтобы отладчик прикрепился к процессу.
Откройте следующее в Chrome
about:inspect
После открытия этой ссылки будут inspect инструменты разработчика Chrome. От выполнения, прежде чем у вас будет время сделать это). Вы можете проверить текущую область и позвонить куча.
ПРИМЕЧАНИЕ. Опция CLI -RUNINBAND обеспечивает тест Jest Runs в том же процессе, а не процессы нереста для отдельных тестов.
Отладка Jest Tests поддерживается из коробки для кода Visual Studio.
Используйте следующий файл конфигурации 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}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Обычно в приложении у вас есть много компонентов пользовательского интерфейса, и каждый из них имеет много разных состояний.
Обычно трудно увидеть эти состояния без приложения приложения или некоторых примеров.
Создать приложение React не включает в себя какие -либо инструменты для этого по умолчанию, но вы можете легко добавить сборник рассказов для React (Source) или React StyleGuidist (источник) в ваш проект. Государства в изоляции от вашего приложения .
Вы также можете развернуть свое руководство по стилю или стиля в качестве статического приложения.
Строительница - это среда разработки для компонентов React UI.
Сначала установите следующий пакет NPM по всему миру:
npm install -g @storybook/cliЗатем запустите следующую команду в каталоге вашего приложения:
getstorybookПосле этого следуйте инструкциям на экране.
Узнайте больше о React Storybook:
StyleGuidist сочетает в себе руководство по стилю, где все ваши компоненты представлены на одной странице с их документацией для реквизита и примерами использования, с средой для разработки компонентов в изоляции, аналогично сборнику рассказов. Стоин как живая редактируемая игровая площадка.
Во -первых, установить 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:
Создать приложение React не предоставляет никаких встроенных функций для публикации компонента в NPM. а затем используя такой инструмент, как NWB, чтобы подготовить его к публикации.
По умолчанию производственная сборка представляет собой полностью функциональное, не в автономном прогрессивном веб-приложении.
Прогрессивные веб -приложения быстрее и надежнее, чем традиционные веб -страницы, и обеспечивают привлекательный мобильный опыт:
sw-precache-webpack-plugin интегрирован в производственную конфигурацию, и он позаботится о создании файла работника службы, который автоматически будет привлекать все ваши локальные активы и держать их в курсе при развертывании обновлений. Стратегия первого кэша для обработки всех запросов на локальные активы, включая начальный HTML, гарантируя, что ваше веб-приложение надежно быстро, даже в медленной или ненадежной сети.
Если вы предпочитаете не включать работников обслуживания до вашего первоначального развертывания производства, то ударите вызов в registerServiceWorker() из src/index.js .
Если бы вы ранее включили работников обслуживания в вашем производственном развертывании и решили, что вы хотели бы отключить их для всех ваших существующих пользователей, вы можете поменять звонок на registerServiceWorker() в src/index.js сначала, изменив импорт работника обслуживания :
import { unregister } from './registerServiceWorker' ; и затем вызовите unregister() /service-worker.js unregister() кэш, чтобы быть недействительным.
Служба требует HTTPS, хотя для облегчения локального тестирования, эта политика не распространяется на localhost .
Служба в настоящее время не поддерживается во всех веб -браузерах.
Сервисный работник включен только в производственной среде, например, вывод npm run build . Не включайте последние изменения, которые вы внесли локально.
Если вам нужно протестировать свой автономный работник на местном уровне локально, создайте приложение (с помощью npm run build ) и запустите простой HTTP create-react-app сервер из вашего каталога сборки. Чтобы проверить производственную сборку локально , и инструкции по развертыванию имеют инструкции по использованию других методов.
Если возможно, настройте свою производственную среду, чтобы обслуживать сгенерированную service-worker.js . Если вы посетите свой производственный сайт, а затем снова повторно посетите service-worker.js . развертывание, Выполнение смены-рефреа временно отключит работника службы и извлечет все активы из сети.
Пользователи не всегда знакомы с автономными веб-приложениями. Сервисный работник получил последние обновления, которые будут доступны в следующий раз, когда они загружают страницу (показывая «новый контент; пожалуйста, обновите». отправная точка, вы можете использовать Логика, включенная в src/registerServiceWorker.js , которая демонстрирует, какие события жизненного цикла работника службы для прослушивания для обнаружения каждого сценария, а какие в качестве по умолчанию просто регистрирует соответствующие сообщения для консоли JavaScript.
По умолчанию файл сгенерированного работника службы не будет перехватывать или кэшировать какое-либо транспортное трафик, такие как запросы API HTTP, изображения или встроенные из другого домена. eject , а затем настроить опцию runtimeCaching в разделе SWPrecacheWebpackPlugin от webpack.config.prod.js .
Конфигурация по умолчанию включает в себя манифест веб -приложения, расположенное на public/manifest.json , который вы можете настроить с деталями, специфичными для вашего веб -приложения.
Когда пользователь добавляет веб -приложение в свой Homestreen, используя 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 index.html каталог build с производственной сборкой вашего приложения /static/js/main.<hash>.js подают с содержанием файла /static/js/main.<hash>.js .<hash>.js.
Для среды, используя узлы, самый простой способ справиться с этим - установить подачу и дать ему справиться с остальными:
npm install -g serve
serve -s build Последняя команда, показанная выше, будет обслуживать ваш статический сайт на порту 5000. Как и многие из внутренних настроек подачи, порт может быть скорректирован с помощью флагов -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 ) ;Выбор вашего серверного программного обеспечения тоже не важен.
Папка build со статическими активами является единственной выходом, созданной приложением Create React.
Однако этого недостаточно /todos/42 если вы используете маршрутизацию на стороне клиента.
Если вы используете маршрутизаторы /todos/42 которые используют API HTML5 pushState API под капотом (например, React Router с browserHistory ), многие статические файловые серверы потерпят неудачу. Сервер будет отвечать на localhost:3000/todos/42 правильно, но экспресс -обслуживание производственной сборки, как и выше, не будет.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
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'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
Дополнительная информация здесь.
Например:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like следующий:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployЗатем запустите:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ). Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
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"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| Переменная | Разработка | Производство | Использование |
|---|---|---|---|
| БРАУЗЕР | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| ХОЗЯИН | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| ПОРТ | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| КИ | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it полностью. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
Например:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build не может минимизироватьSome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
