Предварительное исследование монорепозитория rushjs+pnpm

предисловие

Т.к. в команде разработчиков много проектов, мы используем проект монорепозитория в проекте, то есть все проекты в команде объединены в репозиторий кода, а некоторые общедоступные пакеты и компоненты извлекаются в независимые подпроекты или подкомпоненты. размещены в одном проекте монорепозитория, что удобно для повторного использования компонентов.Также в интернете есть много статей о сопутствующих преимуществах, поэтому я не буду здесь вдаваться в подробности. На самом деле существует множество инструментов управления модулями для монорепозитория. До этого были lerna yarn и т. д. Команда, в которой я работал, использовала yarn для управления монорепозиторием. Недавно были проведены некоторые оптимизации, и для управления используется rushjs+pnpm Этот блог является автором этого блога некоторые предварительные исследования.

Технический отбор

rushjs
pnpm
monorepo
tsdx

день чтения

Rush упрощает жизнь разработчикам JavaScript, которые создают и публикуют множество пакетов NPM одновременно. Если вы хотите объединить все свои проекты в один репозиторий, вы обратились по адресу! Rush — это быстрое профессиональное решение для управления этим сценарием. .

Выдержки из введения официального сайта, вкратце, появление спешки удобно для js-разработчиков для сборки и публикации нескольких пакетов npm за раз.Если учесть, что все проекты размещены в одном репозитории кода (monorepo), вы можно рассмотреть возможность использования спешки, спешка для этого обеспечивает быстрое и эффективное решение.
Некоторые особенности раша (из официальной документации):

• A single NPM install: rush устанавливает все зависимости вашего проекта в общую папку, это не только похоже на package.json в корневом каталоге проекта, rush также реконструирует node_modules каждого проекта через символические ссылки Эта логика поддерживает несколько менеджеров пакетов, таких как pnpm npm yarn.
• Automatic local linking: каждый проект в срочном репозитории может быть автоматически связан с другими проектами, нет необходимости публиковать пакеты и нет необходимости в каких-либо ссылках npm.
• Fast builds: rush проанализирует ваш граф зависимостей и построит ваши проекты в правильном порядке. Если между двумя проектами нет зависимостей, rush будет следовать этим зависимостям через отдельные процессы. Этот многопроцессный метод будет лучше, чем использование однопоточного подхода имеет значительное ускорение.
• Subset and incremental builds: Подмножество и инкрементная сборка в очень большом репозитории кода. Если вы просто хотите использовать или разработать один или два проекта, мы можем указать, что в это время нужно построить отдельный проект, срочная перестройка — зависит только от ваших вышестоящих отношений. чистая сборка при внесении некоторых измененийrush rebuild --from <project>Выполняйте чистую сборку только затронутых нижестоящих проектов.
• Cycli dependencies: Циклические зависимости, если проект косвенно зависит от своей старой версии, проект в цикле использует последнюю выпущенную версию, в то время как другие проекты по-прежнему получают самую последнюю. (Я не понял этого, когда прочитал это, вероятно, это означает, что он может очень хорошо управлять циклическими зависимостями между несколькими разными версиями)
• Bulk publishing: когда вам нужно выпустить несколько пакетов в репозиторий кода, rush обнаружит, что эти пакеты были изменены, автоматически изменит все соответствующие номера версий, а затем выполнит их в каждом каталоге.npm publish
• Changelog tracking: Автоматически объединять информацию об изменениях в файл CHANGELOG.md при наличии изменений.

связанные с pnpm

С автором очень давно не выходит на связь, и в связи с этим я также ссылаюсь на статьи других учеников на Наггетс
nuggets.capable/post/693204…

окружающая обстановка

1. Среда, MAC, используемый автором, и студенты, использующие Windows, могут несколько отличаться.Эта статья по-прежнему описывается с точки зрения среды разработки MAC.
2. Установите nodejs (для удобства разработки вам также может понадобиться установить nvm, чтобы облегчить переключение между различными версиями узла. Здесь упоминание, установка nvm по-прежнему имеет много сетевых ограничений, и это может занять много обходных путей...)
3. УстановитьyarnНе обязательно, привычки личного развития взяты изnpmПеревести вyarnДа, вы установили пряжу локально, вы можете установить ее самостоятельно, если вам это нужно.

работа по инициализации

Создайте пустой каталог в качестве каталога проекта

mkdir eason-td-monorepo
cd eason-td-monorepo

Установите rush (установите с помощью пряжи или используйте npm)

yarn global add @microsoft/rush

установить пнпм

yarn global add pnpm

проект срочной инициализации

rush init

Откройте его в редакторе. Я использую vscode здесь. После открытия смотрите на rush.json, emmm и предупреждение

Не паникуйте в это время, потому что это файл конфигурации JSON. Файл конфигурации JSON, как правило, не разрешен иметь комментарии. VSCode имеет встроенный тип называемыйJSON with Comments, специально для идентификации этого типа, переключите тип здесь в правом нижнем углу, переключитесь наJSON with CommentsНикаких предупреждений и ошибок не будет, поэтому я не буду здесь вдаваться в подробности.

После обработки в соответствии с вышеописанным шагом вы можете увидеть, что здесь есть еще некоторые орфографические подсказки.Хотя это не очень важно, мы разберемся с этим здесь.Этот шаг можно пропустить.

vscode открыть настройки, поискcSpell.words, добавьте сюдаpnpm, то не должно быть напоминания об ошибке

В rush.json можно указать инструменты для запуска, вотpnpm,npm, yarnЭти несколько, мы можем указать pnpm здесь, и другие тоже могут играть, поэтому я не буду здесь вдаваться в подробности.

В rush.json очень много настроек и комментариев, эммм, я не буду здесь внимательно изучать, давайте сначала разберемся с ключом, можете глянутьprojectsЭта конфигурация, потому что мы собираемся создать проект монорепозитория, в этом проекте монорепозитория будет несколько подпроектов, поэтому вы можете сосредоточиться на этом в это время.

Посмотрите еще раз на это место в каталогеcommon/config/rush, есть соответствующийpnpmfile.jsфайл, если мы не используем pnpm, мы можем удалить этот файл, конечно, не удаляйте его здесь, мы используем pnpm

Создать подпроект

Создайте проект в корневом каталоге проектаappsПуть для размещения наших подпроектов, здесь мы создаем посадочный подпроект

mkdir apps
cd apps
yarn create react-app landing

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

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

rush update

После завершения установки переключитесь наapps/landingЧтобы запустить этот подпроект в каталоге, вы можете использовать npm, yarn или rushx для запуска проекта. rushx — это команда, которая появится после глобальной установки rush. Здесь мы рекомендуем использовать rushx

cd apps/landing
rushx start

В это время будет запущен локальный проект, а затем в локальном браузере откроется страница проекта.По умолчанию порт 3000. Если локальный порт 3000 занят, будет предложено использовать другие порты. на этот раз введите да.

На данный момент одно из наших под-приложений работает. Наш проект является проектом монорепозитория, поэтому одного проекта недостаточно, и нам нужно много других подпроектов для экспериментов. Здесь мы продолжаем создавать проект (control + c чтобы закончить проект операции прямо сейчас)

Создать второй подпроект

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

cd ../../
mkdir libs
cd libs

В настоящее время нам нужно использовать инструмент под названиемtsdxЧтобы создать наш проект подкомпонента, создайте подпроект компонентов, tsdx предоставит три шаблона на выбор, здесь мы можем выбрать реакцию

npx tsdx create components

Переключаемся на созданный путь, сразу запускаем приложение, об ошибке не сообщается, завершаем операцию нажатием control+c

cd components
rushx start

Добавлен новый проект. В настоящее время нам нужно добавить информацию о конфигурации этого проекта в rush.json.

Здесь мы называем вновь созданный проект как@shared/components, следует отметить, что в созданном намиlibs/components/package.jsonЕсть по умолчаниюname, здесь мы должны сохранить единство двух сторон, чтобы мы могли определить конкретный соответствующий проект

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

cd ../../
rush update --purge

После завершения операции попробуем установить только что объявленный в лендинговом проекте "пакет", потому что в это время раш знает, что мы ссылаемся на пакет в локальном проекте монорепозитория, поэтому он не будет пытаться найти соответствующий пакет через нпм через сеть

cd apps/landing
rush add --package @shared/components

Мы видим подсказку, теперь проект ссылки выполнен успешно, следующим шагом будет запуск сборки или перестроения.

rush build

Ссылка на @shared/components в лендинговом проекте, давайте изменимapps/landing/src/App.js

import logo from './logo.svg';
import './App.css';
import { Thing } from '@shared/components';

function App() {
  return (
    <div className="App">
      <Thing />
    </div>
  );
}

export default App;

Перезапустите приложения/целевое приложение

rushx start

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

Эпилог

На этот раз это только предварительное исследование, я еще многого не понимаю в таких инструментах, как rush и pnpm.

Последующие статьи:rushjs+pnpm monorepo rush расширенный

рекламировать

Внутренний толчок, добро пожаловать на отправку резюме
Jobs.byte dance.com/referral/PC…
Сяопен Моторс:app.mochaHR.com/recommend на…