Как обновить create-react-app?

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
— npm uninstall -g create-react-app
— yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

Обновлю глобально пишет снова ошибку

npm -g create-react-app

where is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, fund, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami

npm -h quick help on
npm -l display full usage info
npm help search for help on
npm help npm involved overview

Specify configs in the ini-formatted file:
/home/dmitry/.npmrc
or on the command line via: npm —key value
Config info can be viewed via: npm help config

Что делать? Помогите пожалуйста

• Вопрос задан более года назад
• 671 просмотр

Подключение и настройка create-react-app

Для работы с React вам будет нужна Node.js выше, чем 14.0.0 на вашем компьютере. Подробнее:

1. Установить node.js
2. Убедиться в том, что node установлена, для этого в терминале можно пробрать в теминале node -v

Для установки Create React App и создания шаблона выполните команды:

npx create-react-app cv-builder cd cv-builder npm start

Где cv-builder , это название проекта.

Исходный файл index.js будет выглядеть как-то так:

import React from "react"; import ReactDom from "react-dom"; import App from "./App"; ReactDom.render(  , document.getElementById("app") );

Зачем нужен React.StrictMode

StrictMode — нужен для обнаружения потенциальных проблем в приложении еще на этапе разработки приложения.

• Обнаружении небезопасных методов жизненного цикла
• Предупреждении об использовании устаревшего API строковых реф
• Предупреждении об использовании устаревшего метода findDOMNode
• Обнаружении неожиданных побочных эффектов
• Обнаружении устаревшего API контекста

Простыми словами — консоль будет красной даже при малейшей ошибке.

Установка uimini:

Для того чтобы установить uimini потребуется написать:

npm install uimini // or: yarn add uimini

Далее, в корневом файле index.js подключить uimini:

import React from "react"; import ReactDom from "react-dom"; // init main app import App from "./App"; // init uimini import "uimini"; // . 

Установка и подключение scss create-react-app:

Чтобы установить scss / sass в create-react-app необходимо лишь установить пакет node-sass :

npm install node-sass --save-dev // или: yarn add node-sass --save-dev

После чего перезапустить сервер!

После этого scss нужно подключать в любые js , jsx файлы по типу:

import "./assets/scss/main.scss";

Примеры компонентов на реакте:

Главный файл app.js с применением uimini будет выглядеть вот-так:

const App = () => ( 
  
 
 
Hello world!
 
 
 
 
 );

Такой подход позволит «прилепить» футер к низу, а хедер оставить вверху.

1. components/Header/Header.jsx
2. components/Footer/Footer.jsx

Являются простыми, поэтому описывать их здесь я пока не вижу смысла, а вот главный файл components/index.js будет выглядеть как-то так:

// components: export from "./Header"; export from "./Footer";

Подключение шрифта в create-react-app

Самый простой, но самый не эффективный способ это cdn от гугла.

Название шрифта, который решил использовать я — Inconsolata . Для подключение шрифта в файл public/index.html нужно добавить:

А в файл scss/main.scss добавить:

.ui-body, .ui-html

Более эффективный способ был бы скачать шрифт и подключить в проект локально, без cdn.

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨

Как перейти с create-react-app на Vite с помощью Jest и Browserslist

Команда React больше не рекомендует использовать create-react-app (CRA) в качестве бандлера для создания нового React-приложения. Команда и сообщество поняли, что хотя CRA и является стартовым инструментом, ему не хватает гибкости, необходимой для настройки и управления большими и сложными приложениями.

Сейчас команда рекомендует использовать production-grade React-фреймворки, такие как NextJS, Remix, Gatsby или Expo для нативных приложений. Хотя фреймворки являются предпочтительным выбором, команда React также рекомендует использовать Vite или Parcel для пользовательских процессов сборки.

Отчасти это связано с тем, что пакет CRA не обновлялся уже около года. Это может вызвать некоторые проблемы, когда пакеты, уже обновленные до более свежих версий, не могут быть использованы в существующем приложении. В результате вам может потребоваться обновить существующие приложения, заменив пакет CRA на рекомендованные альтернативы — Vite или Parcel.

В этой статье мы рассмотрим шаги по миграции производственного приложения с CRA на Vite. Вы узнаете, зачем нужен каждый шаг, как сохранить Jest для тестов и как обновить browserslist , поскольку он не работает с vite из коробки.

В разделе “Заключение” вы найдете пример запроса на исправление, который включает все изменения. В конце каждого шага вы найдете пример текста коммита, который показывает, какие изменения кода требуются для каждого шага.

Шаг 1: Установите Vite и плагины

Вот команды для установки необходимых нам пакетов:

yarn add vite @vitejs/plugin-react vite-tsconfig-paths ИЛИ npm install vite @vitejs/plugin-react vite-tsconfig-paths 

Помимо Vite, мы добавляем два плагина — @vitejs/plugin-react и vite-tsconfig-paths .

Плагин vitejs/plugin-react plugin обеспечивает быстрое обновление при разработке, использует автоматическое время выполнения JSX, а также пользовательские плагины или пресеты Babel. Он обогащает ваш опыт разработки React.

Плагин vite-tsconfig-paths plugin разрешает импорт для отображения путей TypeScript. Например, вы можете использовать components/ComponentName вместо ./../components/ComponentName .

Другие плагины Vite

Еще один плагин, который вы можете рассмотреть, это vite-plugin-svgr , который преобразует SVG в компоненты React и использует svgr под капотом. Я не стал его использовать, так как в переносимом приложении у нас нет такого сценария использования.

Вы также можете ознакомиться с другими официальными плагинами Vite здесь.

Шаг 2: Создайте файл конфигурации Vite

При запуске vite в командном терминале Vite пытается найти файл vite.config.ts в корневом каталоге проекта. О том, как дополнительно настроить этот файл для intellisense, конфигурации на основе окружения, конфигурации async и использования переменных окружения, вы можете прочитать на странице Vite.

В корне вашего приложения создайте файл vite.config.ts со следующим содержимым:

import from 'vite'; import react from '@vitejs/plugin-react'; import viteTsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig(  // в зависимости от вашего приложения, base также может быть "/"  base: '',  plugins: [react(), viteTsconfigPaths()],  server:   // это гарантирует, что браузер откроется при запуске сервера  open: true,  // устанавливается порт по умолчанию 3000  port: 3000,  >, >);

Шаг 3: Создание ссылки на файл типа Vite

Этот шаг необходим для ссылки на файл деклараций типов, что помогает при проверке типов и Intellisense. По умолчанию типы Vite предназначены для среды NodeJS. Для кода на стороне клиента Vite предоставляет определения типов в vite/client.d.ts .

В корне вашего приложения создайте файл с именем vite-env.d.ts со следующим содержанием:

/// reference types="vite/client" />

Шаг 4: Переместите файл index.html .

У Vite есть корневая директория, из которой обслуживаются ваши файлы. Поскольку index.html является точкой входа на сервер Vite, этот файл должен находиться в корневой директории.

Из публичной директории переместите файл index.html в корень вашего проекта.

Шаг 5: Обновление файла index.html

Здесь необходимо сделать два обновления:

Удалите %PUBLIC_URL% .

Vite автоматически разрешает URL внутри index.html , поэтому нет необходимости в %PUBLIC_URL% . Для этого вы можете выполнить поиск и замену внутри файла index.html . Обязательно удалите все вхождения.

link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />

link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Добавьте скрипт модуля в нижнюю часть тега body

Vite рассматривает index.html как исходный код и часть графа модуля. Он разрешает , который ссылается на ваш исходный код JavaScript.

В нижней части тега body в файле index.html добавьте скрипт, как показано ниже:

body>    script type="module" src="/src/index.tsx">script>  . body>

Шаг 6: Замените CRA на Vite .

Теперь вы можете удалить CRA, добавить скрипты Vite в файл package.json и обновить tsconfig.json .

Удаление CRA

Чтобы удалить CRA, выполните следующую команду. Это удалит react-scripts из наших установленных пакетов.

yarn remove react-scripts ИЛИ npm uninstall react-scripts 

После выполнения вышеуказанной команды удалите файл react-app-env.d.ts .

Добавьте скрипты Vite в файл package.json .

Если Vite установлен, вы можете использовать бинарник vite в своих скриптах. Это может означать замену react-scripts в нескольких местах. Ваше внимание должно быть сосредоточено на ключах start и build . Ключ preview — это дополнение, которое помогает предварительно просматривать сборку локально.

Обратите внимание, что start — это vite , а не vite start .

  "scripts":   "start": "vite", // запуск dev-сервера  "build": "tsc && vite build", // сборка для производства  "preview": "vite preview" // локальный предварительный просмотр сборки для производства  > >,

Обновление tsconfig.json

Здесь вы должны сосредоточиться на параметрах isolatedModules , lib , target и types . Для получения дополнительных опций, вот пример файла tsconfig от Vite.

 "compilerOptions":  "lib": ["dom", "dom.iterable", "esnext"], "target": "ESNext", "types": ["vite/client"], "isolatedModules": true, >, > 

Обновление process.env.REACT_APP_VARIABLE (необязательно)

Это необходимо, если ваше приложение использует переменную окружения. Vite использует import.meta.env.REACT_APP_VARIABLE вместо process.env.REACT_APP_VARIABLE . Более подробную информацию о переменных окружения и режимах Vite вы можете найти здесь.

process.env.REACT_APP_VARIABLE;

import.meta.env.REACT_APP_VARIABLE;

Замените REACT_ на VITE_ (необязательно)

Это нужно только в том случае, если вы обновили process.env выше. Замените переменные окружения REACT_ , чтобы они начинались с VITE_ . Это необходимо, потому что Vite отфильтровывает любые переменные окружения, не начинающиеся с VITE_ .

REACT_APP_API_BASE;

VITE_APP_API_BASE;

Шаг 7: Запустите ваше приложение

запуск yarn ИЛИ npm start

Поздравляем! Вы успешно завершили первый шаг по переносу приложения с CRA на Vite. Вы должны увидеть экран, похожий на изображение ниже:

Примера коммита нет ;).

Возможные блокировщики и их решения

Ошибка global не определена

Если у вас возникла эта ошибка, определите global в файле vite.config.ts , как показано ниже:

import from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig(  // .   define:   // здесь находится основное обновление  global: 'globalThis',  >, >);

Если вы используете @emotion/react или @emotion/css

Вам необходимо сообщить об этом Vite. Для этого установите @emotion/babel-plugin .

yarn add @emotion/babel-plugin ИЛИ npm install @emotion/babel-plugin

Затем обновите r в вашем ViteПлагин eact в файле vite.config.ts , как показано ниже:

import from 'vite'; import react from '@vitejs/plugin-react'; import viteTsconfigPaths from 'vite-tsconfig-paths'; import svgr from 'vite-plugin-svgr'; export default defineConfig(  // .   plugins: [  // здесь находится основное обновление  react(  jsxImportSource: '@emotion/react',  babel:   plugins: ['@emotion/babel-plugin'],  >,  >),  ],  // .  >);

О нет, мои модульные тесты не работают!

На этом этапе попробуйте запустить свои модульные тесты — yarn test или npm run test . Вполне возможно, что они не работают. В следующих шагах описано, как можно исправить работу юнит-тестов.

Ваши модульные тесты не работают, потому что CRA использует react-scripts test для запуска тестов, поэтому мы хотим перейти на использование jest .

Шаг 8: Установка Jest и зависимостей, связанных с TypeScript

Для начала вам нужно установить jest , ts-jest и jest-environment-jsdom . jest будет нашим новым бинарником для запуска тестов, [ts-jest](https://www.npmjs.com/package/ts-jest) — это трансформатор с поддержкой source map, который позволяет запускать тесты в проектах TypeScript, а jest-environment-jsdom имитирует поведение браузера во время запуска тестов.

yarn add -D jest @types/jest ts-jest jest-environment-jsdom ИЛИ npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom

Шаг 9: Обновление конфигурации Jest

Это зависит от вашей текущей конфигурации Jest. Если она настроена внутри package.json , вы можете обновить ее следующим образом. Здесь вы сосредоточитесь на preset , testEnvironment , moduleNameMapper и modulePaths .

preset устанавливается на ts-jest/presets/js-with-ts , чтобы разрешить TypeScript с JavaScript. Вы также можете просто установить значение ts-jest в зависимости от вашего приложения.

moduleNameMapper настраивает Jest на изящную обработку таких активов, как таблицы стилей и изображения.

"jest":  "preset": "ts-jest/presets/js-with-ts", "testEnvironment": "jest-environment-jsdom", "moduleNameMapper":  "\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",  "\\\.(css|less)$": "/**mocks**/styleMock.js" >, "modulePaths": [ // вы можете изменить это в соответствии с настройками вашего приложения "/src" ], >, 

Поскольку мы ссылались на файл в moduleNameMapper выше, нам нужно создать этот файл и соответствующие ему файлы. Шаг 10 позаботится об этом. Более подробно эта настройка описана в документации Jest здесь.

Шаг 10: Добавьте каталог __mocks__ в корень вашего проекта

В корне вашего проекта создайте папку с именем __mocks__ .

Внутри созданной папки __mocks__ добавьте файл с именем styleMock.js и добавьте в него следующее содержимое:

module.exports = <>;

Внутри созданной папки __mocks__ добавьте файл с именем fileMock.js и добавьте в него следующее содержимое.

module.exports = 'test-file-stub';

Шаг 11: Обновление скриптов package.json .

Теперь, когда у нас правильно установлен jest , мы можем заменить react-scripts tests на jest . Изменения должны быть такими, как показано ниже. Если в вашем коде до этого не было ключей test:coverage или test:debug , можете не обращать внимания.

"scripts":   "test": "react-scripts test",  "test:coverage": "react-scripts test --coverage .",  "test:debug": "react-scripts test --inspect-brk --runInBand --no-cache" >

"scripts":  "test": "jest", // вы можете добавить это, чтобы сохранить режим наблюдения "test:watch": "jest --watch", "test:coverage": "jest --coverage .", "test:debug": "jest --inspect-brk --runInBand --no-cache" > 

Шаг 12: Запустите ваши тесты

yarn test ИЛИ npm test

Если вы столкнулись с проблемой, связанной с import.meta , вы можете решить ее, перенеся все ключи окружения в один файл и подражая этому файлу в вашем тесте. Вы можете взглянуть на этот коммит (https://github.com/suretrust/stock-ticker/commit/07d15d1f000ec2cef7ec6dd01fccb43af3e67d30), чтобы лучше понять, что я имею в виду.

Примера коммита нет :).

А, это работает! Но как насчет конфигурации списка браузеров?

Что такое конфигурация списка браузеров?

Это конфигурация, используемая для обмена целевыми или поддерживаемыми браузерами между несколькими репозиториями фронтенда.

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

Пример применения конфигурации browserslist — когда вам нужно обеспечить совместимость со старыми браузерами. Передача этого диапазона в конфигурацию browserslist поможет вашему бандлеру скомпилировать ваш код с использованием полифиллов, совместимых с целевыми браузерами. Таким образом, ваша страница будет иметь оптимизированную производительность и хороший пользовательский опыт.

Mozilla определяет полифилл как часть кода (обычно JavaScript в Интернете), используемую для обеспечения современной функциональности в старых браузерах, которые не поддерживают ее изначально.

Конфигурация списка браузеров часто задается в файле package.json или .browserslistrc , как показано ниже.

package.json

 "browserslist": [ "iOS >= 9", "Android >= 4.4", "2 последние версии", "> 0.2%", "не мертв" ] > 

.browserslistrc

iOS >= 9 Android >= 4.4 последние 2 версии > 0.2% не умер

Почему browserslist является проблемой в Vite?

Vite использует ESBuild под капотом, который ожидает формат, отличный от обычного формата browserslist .

ESBuild ожидает формат: [‘es2015’, ‘safari11’, ‘ios11’] .

Формат списка браузеров: [‘defaults’, ‘Safari >= 11’, ‘ios_saf >= 11’] .

В результате этого несоответствия Vite игнорирует вашу конфигурацию browserslist , которая в данный момент находится в файле package.json или .brwserslistrc .

Чтобы исправить это, вы можете использовать пакет под названием browserslist-to-esbuild , который делает это преобразование под капотом и передает конфигурацию в build.target внутри файла vite.config.ts . Шаги 13 и 14 позаботятся об этом.

Шаг 13: Установите browserslist-to-esbuild .

yarn add browserslist-to-esbuild ИЛИ npm install browserslist-to-esbuild 

Шаг 14: Подтверждаем browserslist в Vite Config

В файле vite.config.ts сделайте обновление, как показано ниже.

import from 'vite' import browserslistToEsbuild from 'browserslist-to-esbuild' export default defineConfig(  ..  build:   // --> ["chrome79", "edge92", "firefox91", "safari13.1"]  target: browserslistToEsbuild(),  >,  .. >)

Затем вы можете передать свои конфигурации, как показано ниже,

export default defineConfig( .. build:  // вы также можете передать сюда свой обычный конфиг списка браузеров target: browserslistToEsbuild([ '>0.2%', 'not dead', 'not op_mini all' ]), >, .. >) 

Заключение

Вуаля! Вы закончили, и ваше приложение полностью перенесено.

Вы узнали “почему” и “как” заменить create-react-app на Vite . Надеюсь, вы гордитесь собой так же, как я гордился тем, что узнал в процессе миграции.

Хорошо, это все! Счастливого кодинга!

Отказ от create-react-app и создание собственного шаблона для React-приложений

Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app .

Что такое CRA?

Create React App — это набор инструментов, созданный и поддерживаемый разработчиками из Facebook. CRA предназначен для быстрого создания шаблонных проектов React-приложений. При использовании CRA база React-проекта создаётся с помощью одной команды.

Сильные стороны CRA

CRA позволяет создать базу для React-проекта одной командой:

npx create-react-app my-app 

npm install react-scripts@latest 

Недостатки CRA

• При использовании CRA усложняется использование собственных конфигураций сборки проектов. Один из способов обхода этого ограничения заключается в использовании команды eject , но это лишает CRA-проекты преимущества в виде единственной зависимости сборки. Ещё один способ использования собственных конфигураций заключается в применении пакетов наподобие customize-cra или react-app-rewired, но подобные конфигурации отличаются ограниченными возможностями.
• CRA скрывает от разработчика внутренние механизмы вспомогательных подсистем проектов. React-разработчик должен знать о том, что именно происходит в ходе подготовки React-приложения к реальной работе. Но так как в CRA используется уже не раз упомянутая «политика одной зависимости», у начинающего разработчика может возникнуть впечатление того, что react-scripts — это единственная зависимость, которая нужна для запуска React-приложения. Начинающий может попросту не знать о том, что, на самом деле, react-scripts — это, по сути, лишь «упаковка» для транспилятора (Babel) и бандлера (Webpack), которые играют ведущую роль в подготовке React-приложений к реальной работе. Я, признаться, и сам этого не знал до тех пор, пока не прочитал этот замечательный материал.
• CRA, как мне кажется, перегружен возможностями, которые, в каком-то проекте, вполне могут оказаться невостребованными. Например, заготовки приложений, создаваемые с помощью CRA, поддерживают SASS. То есть, если в проекте используется обычный CSS или Less, поддержка SASS окажется совершенно ненужной. Вот, если интересно, файл package.json CRA-приложения после команды eject . В этом файле «развёрнуты» зависимости, раньше представленные react-scripts .

Альтернатива CRA

Разрабатывая альтернативу CRA, мы собираемся оснастить её возможностью быстрого, с использованием лишь одной команды, создания базовых React-проектов. Это повторяет одну из полезных возможностей create-react-app . А недостатки CRA мы, конечно, в нашу систему переносить не будем, самостоятельно устанавливая зависимости и настраивая проект. В наш проект не попадут две других полезных возможности CRA (избавление разработчика от необходимости изучения вспомогательных механизмов и схема «одной зависимости»), так как они несут с собой и недостатки (сокрытие внутренних механизмов вспомогательных подсистем от разработчика и сложность настройки собственных конфигураций сборки проектов).

Вот репозиторий, в котором имеется весь код, который мы будем обсуждать в этом материале.

Начнём работу с инициализации проекта средствами npm и с инициализации его git-репозитория:

npm init git init 

Создадим файл .gitignore следующего содержания:

node_modules build 

Это позволит нам не включать в состав репозитория папки, имена которых присутствуют в файле.

Теперь поразмыслим о том, какие основные зависимости нам нужны для того чтобы собрать и запустить React-приложение.

Библиотеки react и react-dom

Это — единственные зависимости времени выполнения, которые нам нужны:

npm install react react-dom --save 

Транспилятор (Babel)

Транспилятор Babel преобразует код, соответствующий стандартам ECMAScript 2015+, в код, который будет работать и в новых, и в устаревших браузерах. Babel, благодаря применению пресетов, используется и для обработки JSX-кода:

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev 

Вот как выглядит простая конфигурация Babel, предназначенная для подготовки к работе React-приложений. Эту конфигурацию можно добавить в файл .babelrc или в package.json :

Babel поддерживает множество пресетов и плагинов. Их можно добавлять в проект по мере возникновения необходимости в них.

Бандлер (Webpack)

Бандлер Webpack отвечает за сборку проекта, формируя на основе кода проекта и кода его зависимостей единственный файл (бандл) приложения. При использовании таких техник оптимизации проектов, как разделение кода, в бандл приложения могут входить и несколько файлов.

npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-dev

Простая конфигурация Webpack, предназначенная для сборки пакетов React-приложений, выглядит так, как показано ниже:

const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = < output: < path: path.resolve(__dirname, 'build'), filename: 'bundle.js', >, resolve: < modules: [path.join(__dirname, 'src'), 'node_modules'], alias: < react: path.join(__dirname, 'node_modules', 'react'), >, >, module: < rules: [ < test: /\.(js|jsx)$/, exclude: /node_modules/, use: < loader: 'babel-loader', >, >, < test: /\.css$/, use: [ < loader: 'style-loader', >, < loader: 'css-loader', >, ], >, ], >, plugins: [ new HtmlWebPackPlugin(< template: './src/index.html', >), ], >;

Сюда, в соответствии с нуждами конкретного приложения, можно добавить различные загрузчики. Если вам эта тема интересна — взгляните на мой материал, где я рассказываю о конфигурациях Webpack, которыми можно воспользоваться для подготовки React-приложений к использованию в продакшне.

Это — все необходимые нам зависимости. Теперь давайте добавим в проект шаблонный HTML-файл и заготовку React-компонента.

Создадим в директории проекта папку src и добавим в неё файл index.html :

В той же папке создадим React-компонент HelloWorld :

import React from 'react'; const HelloWorld = () => < return ( 
Hello World
 ); >; export default HelloWorld; 

В ту же папку добавим файл index.js :

import React from 'react'; import < render >from 'react-dom'; import HelloWorld from './HelloWorld'; render(, document.getElementById('root')); 

И наконец — добавим в package.json описания скриптов для запуска ( start ) и сборки ( build ) проекта:

"scripts":

Вот и всё. Теперь в нашем распоряжении имеется работоспособная заготовка React-приложения. Убедиться в этом можно, выполнив команды npm start и npm run build .

Теперь давайте оснастим нашу систему возможностью подготовки шаблона проекта с помощью единственной команды. То есть — воссоздадим одну из сильных сторон CRA. Мы собираемся использовать исполняемый JS-файл, который будет вызываться при вводе соответствующей команды в командной строке. Например, подобная команда может выглядеть так:

reactjs-boilerplate new-project

Для реализации этой идеи мы собираемся воспользоваться разделом bin файла package.json .

Сначала установим пакет fs-extra:

npm i fs-extra

Теперь создадим исполняемый JS-файл start.js , который будет расположен в папке bin нашего проекта. Поместим в этот файл следующий код:

#!/usr/bin/env node const fs = require("fs-extra"); const path = require("path"); const https = require("https"); const < exec >= require("child_process"); const packageJson = require("../package.json"); const scripts = `"start": "webpack-dev-server --mode=development --open --hot", "build": "webpack --mode=production"`; const babel = `"babel": $`; const getDeps = (deps) => Object.entries(deps) .map((dep) => `$@$`) .toString() .replace(/,/g, " ") .replace(/^/g, "") // исключим зависимость, используемую только в этом файле, не относящуюся к шаблону .replace(/fs-extra[^\s]+/g, ""); console.log("Initializing project.."); // создадим папку и инициализируем npm-проект exec( `mkdir $ && cd $ && npm init -f`, (initErr, initStdout, initStderr) => < if (initErr) < console.error(`Everything was fine, then it wasn't: $`); return; > const packageJSON = `$/package.json`; // заменим скрипты, задаваемые по умолчанию fs.readFile(packageJSON, (err, file) => < if (err) throw err; const data = file .toString() .replace( '"test": "echo \\"Error: no test specified\\" && exit 1"', scripts ) .replace('"keywords": []', babel); fs.writeFile(packageJSON, data, (err2) =>err2 || true); >); const filesToCopy = ["webpack.config.js"]; for (let i = 0; i < filesToCopy.length; i += 1) < fs.createReadStream(path.join(__dirname, `../$`)).pipe( fs.createWriteStream(`$/$`) ); > // npm, при установке пакета, удалит файл .gitignore, поэтому его нельзя скопировать из локальной папки шаблона; этот файл нужно загрузить. После отправки кода в GitHub-репозиторий пользуйтесь raw-файлом .gitignore https.get( "https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore", (res) => < res.setEncoding("utf8"); let body = ""; res.on("data", (data) =>< body += data; >); res.on("end", () => < fs.writeFile( `$/.gitignore`, body, < encoding: "utf-8" >, (err) => < if (err) throw err; >); >); > ); console.log("npm init -- done\n"); // установка зависимостей console.log("Installing deps -- it might take a few minutes.."); const devDeps = getDeps(packageJson.devDependencies); const deps = getDeps(packageJson.dependencies); exec( `cd $ && git init && node -v && npm -v && npm i -D $ && npm i -S $`, (npmErr, npmStdout, npmStderr) => < if (npmErr) < console.error(`Some error while installing dependencies $`); return; > console.log(npmStdout); console.log("Dependencies installed"); console.log("Copying additional files.."); // копирование дополнительных файлов с кодом fs.copy(path.join(__dirname, "../src"), `$/src`) .then(() => console.log( `All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd $\nnpm start` ) ) .catch((err) => console.error(err)); > ); > ); 

Теперь давайте свяжем этот исполняемый JS-файл с командой из package.json :

Создадим локальную связь для пакета:

npm link 

Теперь, после выполнения этой команды, если в терминале выполнить команду вида your-boilerplate-name my-app , будет вызван наш исполняемый файл start.js . Он создаст новую папку с именем my-app , скопирует в неё файлы package.json , webpack.config.js и .gitignore , а так же папку src , и установит зависимости нового проекта my-app .

Замечательно. Теперь всё это работает на вашем компьютере и позволяет вам, пользуясь единственной командой, создавать базовые React-проекты, обладающие собственной конфигурацией сборки.

Вы можете пойти дальше и опубликовать свой шаблон в реестре npm. Для того чтобы это сделать, сначала надо отправить проект в GitHub-репозиторий. А дальше — следуйте этим инструкциям.

Примите поздравления! Только что мы, буквально за несколько минут, создали альтернативу create-react-app . Наше решение не перегружено ненужными возможностями (в проекты, созданные на его основе, можно добавлять зависимости по мере возникновения необходимости в них). Пользуясь им, можно легко подстраивать конфигурацию сборки проекта под свои нужды.

Конечно, наше решение минималистично. Проекты, создаваемые на его основе, нельзя признать готовыми к использованию в продакшне. Для того чтобы подготовить их к реальной работе, нужно оснастить наш шаблон некоторыми настройками Webpack, ответственными за оптимизацию сборок проектов.

Я подготовил шаблон reactjs-boilerplate, позволяющий создавать проекты, готовые к работе в продакшне. Тут используется соответствующая конфигурация сборки, линтинг и хуки, ответственные за проверку проекта перед созданием коммитов. Испытайте этот шаблон. Если у вас появятся какие-то идеи по его совершенствованию, или если вы решите сделать вклад в его разработку — присоединяйтесь к работе над ним.

Итоги

Вот о чём мы говорили в этом материале:

• Мы разобрали плюсы и минусы create-react-app .
• Мы реализовали в своём проекте полезную возможность CRA по созданию заготовок React-приложений одной командой. А от недостатков CRA мы избавились.
• Мы оснастили свой проект минимальными конфигурациями Webpack и Babel, необходимыми для сборки и запуска React-приложений.
• Мы создали React-компонент HelloWorld.js , предусмотрели возможность сборки проекта и его запуска с использованием сервера разработки.
• Мы создали исполняемый JS-файл и связали его с соответствующей командой, воспользовавшись разделом bin файла package.json .
• Мы воспользовались командой npm link с целью создания локальной связи для нашего проекта и получения возможности создавать новые базовые проекты на его основе с помощью единственной команды.

Пользуетесь ли вы create-react-app при создании новых React-проектов?