В последнее время я использую create-react-app, чтобы упростить. До сих пор я использовал собственные сценарии npm, но это становится все сложнее. Приложение Create-react-app очень ограничено, но принятие ограничений может освободить, поэтому я решил попробовать. Я призываю вас тоже попробовать и придерживаться этого как можно дольше.
Иногда действительно хочется сделать что-то неподдерживаемое. Вы можете катапультироваться и, таким образом, иметь полный контроль, но я предлагаю вам избегать этого, если в этом нет крайней необходимости. Приложение Create-react-app будет продолжать улучшаться, и вы потеряете возможность обновления, если вы его извлечете. Существует также проблема большего контроля - в ущерб вашему времени, если вы испытываете соблазн его использовать. До сих пор я избегал катапультирования, и все жертвы окупаются в фокусе.
В тех случаях, когда вы должны сделать что-то неподдерживаемое, может быть простой обходной путь. Мне нужен был настроенный Bootstrap, но я также хотел, чтобы он был полностью интегрирован в процесс сборки, чтобы мне не приходилось загружать его каждый раз, когда требуется изменение. Быстрый поиск подтвердил, что create-react-app сопровождающий не планирует включать поддержку за меньшее, но он предложил умный обходной путь с использованием инструментов, уже имеющихся в нашем распоряжении. В сущности:
- Создайте новый пакет, который зависит от официального пакета Bootstrap
- Добавьте файл .less, который импортирует и настраивает Bootstrap.
- Добавить скрипт сборки для компиляции в css
- Положитесь на этот пакет в своем проекте на основе приложения create-react-app
Я выбрал этот путь. Он не идеален, но его легко настроить и он выполняет свою работу. Я хочу побудить вас искать разумные обходные пути, прежде чем прибегать к извлечению. С этой целью я привел ниже пример добавления Bootstrap в ваш проект на основе приложения create-react-app.
Создать собственный пакет Bootstrap
$ cd example-react-app $ mkdir custom-bootstrap $ cd custom-bootstrap $ npm init # (or yarn init)
Во время инициализации используйте build/index.css в качестве значения точки входа. Это позволит импортировать CSS без знания внутреннего расположения файла в этом модуле.
Для целей этой статьи модуль существует в родительской папке проекта create-react-app и, следовательно, отслеживается в том же репозитории. Если это будет общая зависимость, которая будет использоваться в нескольких проектах, вы можете разместить ее на уровень выше и использовать отдельный репозиторий. Следующие инструкции изменятся только в используемых относительных путях.
Добавить зависимости
Bootstrap, конечно, но тоже меньше, который будет использоваться для компиляции кастомного css.
$ npm install --save bootstrap less # or yarn add bootstrap less
Добавьте файл .less (например, index.less)
// the main bootstrap file @import "./node_modules/bootstrap/less/bootstrap"; // necessary to avoid compilation error @icon-font-path: "../node_modules/bootstrap/fonts/"; // customizations @font-size-base: 16px; @line-height-base: 1.7;
В моей простой настройке я оставил глификоны в их исходной папке в модуле Bootstrap, поэтому необходимо указать новое относительное местоположение с помощью переменной @icon-font-path.
Добавьте скрипт сборки в package.json
"scripts": {
"build": "lessc index.less build/index.css",
}
Сам пакет начальной загрузки составляет dist, но я использую build для пользовательского пакета, поскольку по умолчанию он будет находиться в .gitignore проекта. Вы можете использовать все, что захотите, но не забывайте игнорировать это, если вы не проверяете сборки.
Ссылка на настраиваемый модуль начальной загрузки
Я хочу иметь возможность вносить изменения в пользовательский пакет Bootstrap и быстро видеть результаты в моем приложении для реагирования, поэтому я использовал npm link, чтобы добавить пользовательский модуль Bootstrap в мой существующий проект приложения create-response-app:
$ npm link # in the custom-bootstrap directory $ cd ../ # back to project root folder $ npm link custom-bootstrap
Импортируйте пользовательский Bootstrap в приложение React
Я уже использовал Bootstrap в своем проекте, поэтому обновил ссылку:
# previously # import 'bootstrap/dist/css/bootstrap.css' # using custom package: import 'custom-bootstrap'
Я не использую файлы JavaScript Bootstrap, поэтому я исключил их из своей пользовательской сборки. Если вы их используете, вы можете либо добавить их в свой собственный пакет, либо зависеть от Bootstrap непосредственно в своем приложении реакции и импортировать их.
Теперь используйте npm run build для перекомпиляции Bootstrap, и ваше приложение, основанное на создании и реагировании, должно автоматически принимать изменения.
Если вы получаете сообщение об ошибке, что не удается найти custom-bootstrap, вы, вероятно, забыли использовать build/index.css в качестве значения для entry в вашем файле package.json во время инициализации. Ничего особенного, просто измени его сейчас.
Глобальная дружественная схема именования
Чтобы избежать конфликтов имен при использовании этого подхода для нескольких проектов (имена ссылок npm обрабатываются глобально для пользователя), выберите схему именования, такую как {project}-bootstrap, и обновите поле name в package.json соответственно. Это также работает с npm scoping, используя такое имя, как @project/bootstrap. Какую бы схему вы ни выбрали, вам нужно будет обновить имя при связывании:
npm link "@project/bootstrap"
и при импорте:
import '@project/bootstrap'
Добавить наблюдателя
Поскольку пользовательский пакет Bootstrap является таким же пакетом, как и любой другой, вы можете настроить его по своему усмотрению. Например, вы можете добавить наблюдателя для автоматического восстановления Bootstrap при сохранении index.less. Эта очередь будет автоматически подхвачена запущенным приложением реагирования, поэтому клиент также будет обновлен. Я использовал npm-watch для своего проекта:
"scripts": {
"build": "lessc index.less build/index.css",
"start": "npm-watch"
},
"watch": {
"build": "index.less"
},
Одновременный запуск сервера разработки и наблюдателя за сборкой настраиваемого модуля
На этом этапе сервер разработки и наблюдатель за сборкой с пользовательской загрузкой работают в отдельных терминалах. Для большинства проектов ваша кастомная сборка начальной загрузки будет меняться нечасто, и поэтому, вероятно, этого достаточно. Если ваш пользовательский модуль предназначен для чего-то, что будет меняться чаще, вы можете попробовать npm-run-all. Вы можете запустить обе сборки одновременно с помощью одной команды:
$ npm install -g npm-run-all $ npm-run-all --parallel start start:custom-bootstrap # long form $ run-p start start:* # short form
Чтобы эта работа работала, добавьте сценарий start:custom-bootstrap в package.json:
"scripts": {
"start": "react-scripts start",
"start:custom-bootstrap": "(cd custom-bootstrap && npm start)",
...
}
С помощью формы start:* легко добавить дополнительные настраиваемые модули.
Обновлено 2017–03–19: Добавлен раздел для определения пользовательского имени пакета.
Обновлено 2017–11–11: инструкции по обновлению точки входа ранее в статье перенесены в раздел об инициализации (и npm init, и yarn init запрашивают значение), поэтому @import 'custom-bootstrap' можно использовать сразу летучая мышь.
