Как создать стартовый шаблон npx

Наши любимые фреймворки имеют стартовые шаблоны, которые помогают нам приступить к настройке наших проектов с минимальной конфигурацией. Некоторые известные примеры:

  • Создание React App (npx create-react-app my-app)
  • Next.js (npx create-next-app@latest)
  • Remix (npx create-remix@latest)

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

Как они работают: эти пакеты npm имеют исполняемый файл, настроенный в package.json:

{
  "name": "create-my-template",
  "version": "1.0.0",
  "bin": {
    "create-my-template": "./index.js";
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Когда пользователь устанавливает пакет npm, он также устанавливает исполняемый файл, настроенный в bin, позволяя пользователю запустить исполняемый файл:

$ npm install create-my-template$ create-my-template
Войти в полноэкранный режим Выйти из полноэкранного режима

npx является частью npm: он позволяет запустить команду из пакета npm. Если в пакете настроен один сценарий bin, будет использоваться эта команда. npx также получит пакет удаленно, если он не установлен локально.

Это означает, что пользователи выполняют приведенную ниже команду, и npx загрузит пакет и запустит исполняемый файл одной строкой:

$ npx create-my-template
Войти в полноэкранный режим Выйти из полноэкранного режима

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

#!/usr/bin/env node

// Usage: npx create-my-template my-app

const spawn = require('cross-spawn');
const fs = require('fs');
const path = require('path');

// The first argument will be the project name.
const projectName = process.argv[2];

// Create a project directory with the project name.
const currentDir = process.cwd();
const projectDir = path.resolve(currentDir, projectName);
fs.mkdirSync(projectDir, { recursive: true });

// A common approach to building a starter template is to
// create a `template` folder which will house the template
// and the files we want to create.
const templateDir = path.resolve(__dirname, 'template');
fs.cpSync(templateDir, projectDir, { recursive: true });

// It is good practice to have dotfiles stored in the
// template without the dot (so they do not get picked
// up by the starter template repository). We can rename
// the dotfiles after we have copied them over to the
// new project directory.
fs.renameSync(
  path.join(projectDir, 'gitignore'),
  path.join(projectDir, '.gitignore')
);

const projectPackageJson = require(path.join(projectDir, 'package.json'));

// Update the project's package.json with the new project name
projectPackageJson.name = projectName;

fs.writeFileSync(
  path.join(projectDir, 'package.json'),
  JSON.stringify(projectPackageJson, null, 2)
);

// Run `npm install` in the project directory to install
// the dependencies. We are using a third-party library
// called `cross-spawn` for cross-platform support.
// (Node has issues spawning child processes in Windows).
spawn.sync('npm', ['install'], { stdio: 'inherit' });

console.log('Success! Your new project is ready.');
console.log(`Created ${projectName} at ${projectDir}`);
Войти в полноэкранный режим Выход из полноэкранного режима

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

  • Вы можете использовать такие инструменты, как commander или inquirer, чтобы добавить интерактивный интерфейс командной строки.
  • Добавьте обработку ошибок. Пример: Проверять, существует ли уже каталог проекта, прежде чем пытаться его создать.
  • Проверьте, какой менеджер пакетов предпочитает использовать пользователь (например, pnpm, yarn).
  • Добавьте некоторые стили с помощью chalk.
  • Хотите ли вы запустить git-репозиторий в директории проекта?
  • Должен ли сценарий установки выполнить очистку, если установка не удалась?

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

Примеры исходного кода

Отличным способом обучения является чтение исходного кода других стартовых шаблонов, которые известны в сообществе:

  • Astro (npm create astro@latest)
  • Создание React App (npx create-react-app my-app)
  • Next.js (npx create-next-app@latest)
  • Nuxt.js (npx create-nuxt-app my-app)
  • SvelteKit (npm create svelte@latest my-app)
  • Remix (npx create-remix@latest)
  • Turborepo (npx create-turbo@latest)
  • Vue (npm init vue@3)

Оцените статью
devanswers.ru
Добавить комментарий