Я хотел узнать, как работает интерфейс командной строки shadcn-ui. В этой статье я обсуждаю код, используемый для создания интерфейса командной строки shadcn-ui/ui.

В части 2.11 мы рассмотрели функцию runInit и то, как shadcn-ui/ui обеспечивает существование каталогов, указанных в разрешенных путях в конфигурации.

В функции runInit выполняются следующие операции:

1. Убедитесь, что все каталоги разрешенных путей существуют.
2. Записать конфигурацию попутного ветра.
3. Записать CSS-файл.
4. Записать файл cn.
5. Установить зависимости.

1, 2, 3, 4 из вышеперечисленного описаны в частях 2.12, 2.13 и 2.14, давайте выясним, как выполняется операция «Установка зависимостей».

Установить зависимости

Приведенный ниже фрагмент кода взят из cli/src/commands/init.ts

// Install dependencies.
const dependenciesSpinner = ora(\`Installing dependencies...\`)?.start()
const packageManager = await getPackageManager(cwd)

// TODO: add support for other icon libraries.
const deps = \[
  ...PROJECT\_DEPENDENCIES,
  config.style === "new-york" ? "@radix-ui/react-icons" : "lucide-react",
\]

await execa(
  packageManager,
  \[packageManager === "npm" ? "install" : "add", ...deps\],
  {
    cwd,
  }
)
dependenciesSpinner?.succeed()

ora — это элегантный счетчик терминала, который используется для отображения сообщения «Установка зависимостей…» при запуске команды npx shadcn init.

getPackageManager

getPackageManager импортируется packages/cli/src/utils/get-package-manager.ts

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise {
  const packageManager = await detect({ programmatic: true, cwd: targetDir })

  if (packageManager === "yarn@berry") return "yarn"
  if (packageManager === "pnpm@6") return "pnpm"
  if (packageManager === "bun") return "bun"

  return packageManager ?? "npm"
}

Вы когда-нибудь использовали npm в проекте pnpm? У меня такое бывает, и часто не удается установить пакет, потому что вы используете npm в проекте pnpm.

@antfu/ni позволяет использовать правильный менеджер пакетов, а функция обнаружения определяет менеджер пакетов, используемый в данном проекте на основе cwd.

Я не могу найти ничего, упомянутого о методе обнаружения в файле readme @antfu/ni на Github. Как бы вы узнали, что такой метод существует, если бы не прочитали его в какой-нибудь базе кода с открытым исходным кодом?

исполнительный директор

Execa запускает команды в вашем скрипте, приложении или библиотеке. В отличие от оболочек, он оптимизирован для программного использования. Построен на основе основного модуля child_process. Его построил легенда Синдре Сорхус

shadcn-ui/ui CLI использует execa для установки необходимых зависимостей как часть команды инициализации npx shadcn-ui.

Заключение

shadcn-ui CLI использует execa, созданный легендой Синдре Сорху. Execa используется для установки необходимых зависимостей в файл сценария. Мы все знакомы с выполнением команд установки, но если вы хотите установить некоторые пакеты в сценарии программно, можно использовать execa.

shadcn-ui CLI определяет менеджер пакетов, используемый в вашем проекте, с помощью метода «detect» из @antfu/ni.

Эта статья отмечает мое стремление изучить и узнать, что происходит внутри, когда вы запускаете команду npx shadcn-ui init как завершенную.

Я перехожу к изучению команды добавления.

Хотите узнать, как собрать shadcn-ui/ui с нуля? Ознакомьтесь с сборкой с нуля

Обо мне:

Веб-сайт: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Электронная почта: [email protected]

Собрать shadcn-ui/ui с нуля

Использованная литература:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L382
2. https://www.npmjs.com/package/ora
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-package-manager.ts#L3
4. https://www.npmjs.com/package/@antfu/ni
5. https://github.com/antfu-collective/ni#readme
6. https://github.com/search?q=import {обнаружить} из "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus