TypeScript CLI: Automatikkan Binaan dan Pasang Skrip

Saya ingin menindaklanjuti jawatan terdahulu saya mengenai CLI Typescript. Begini cara saya ingin meneruskan: Saya merancang untuk melaksanakan perintah Build untuk membina aplikasi Vite dan perintah yang digunakan untuk menggunakan aplikasinya ke Amazon S3 dan AWS CloudFront.

Membuat CLI TypeScript untuk monorepo anda

Chris Cook ・ 1 Dis '24

#Typescript #javascript #webdev #programming

Kami akan menggunakan Listr2 sebagai pelari tugas untuk menentukan langkah -langkah yang diperlukan untuk membina dan menggunakan aplikasinya. Kami akan menggunakan execa untuk menjalankan arahan CLI untuk Vite dan AWS. Oleh kerana kita menjalankan kod TypeScript, kita boleh menggunakan API programatik dan bukannya arahan CLI, tetapi mari kita simpannya mudah!

#!/usr/bin/env -S pnpm tsx
import chalk from 'chalk';
import { Command } from 'commander';
import { Listr } from 'listr2';
import { $ } from 'execa';

interface Ctx {
  command: 'build' | 'deploy';
}

const tasks = new Listr<ctx>(
  [
    /**
     * Build tasks
     */
    {
      enabled: (ctx) => ctx.command === 'build' || ctx.command === 'deploy',
      title: 'Build',
      task: (ctx, task): Listr =>
        task.newListr<ctx>([
          /**
           * Runs `vite build`.
           */
          {
            title: `Run ${chalk.magenta('vite build')}`,
            task: async (ctx, task): Promise<void> => {
              const cmd = $({ all: true })`vite build`;
              cmd.all.pipe(task.stdout());

              await cmd;

              task.output = `Build completed: ${chalk.dim('./dist')}`;
            },
            rendererOptions: { persistentOutput: true },
          },
        ]),
    },
    /**
     * Deploy tasks
     */
    {
      enabled: (ctx) => ctx.command === 'deploy',
      title: 'Deploy',
      task: (ctx, task): Listr =>
        task.newListr<ctx>([
          /**
           * Runs `aws s3 sync`.
           */
          {
            title: `Run ${chalk.magenta('aws s3 sync')}`,
            task: async (ctx, task): Promise<void> => {
              const build = './dist';
              const bucket = 's3://my-bucket';

              const cmd = $({ all: true })`aws s3 sync ${build} ${bucket} --delete`;
              cmd.all.pipe(task.stdout());

              await cmd;

              task.output = `S3 sync completed: ${chalk.dim(bucket)}`;
            },
            rendererOptions: { persistentOutput: true },
          },
          /**
           * Runs `aws cloudfront create-invalidation`.
           */
          {
            title: `Run ${chalk.magenta('aws cloudfront create-invalidation')}`,
            task: async (ctx, task): Promise<void> => {
              const distributionId = 'E1234567890ABC';

              const cmd = $({ all: true })`aws cloudfront create-invalidation --distribution-id ${distributionId} --paths /* --no-cli-pager`;
              cmd.all.pipe(task.stdout());

              await cmd;

              task.output = `CloudFront invalidation completed: ${chalk.dim(distributionId)}`;
            },
            rendererOptions: { persistentOutput: true },
          },
        ]),
    },
  ],
  {
    rendererOptions: {
      collapseSubtasks: false,
    },
  },
);

const program = new Command()
  .name('monorepo')
  .description('CLI for Monorepo')
  .version('1.0.0');

program
  .command('build')
  .description('Build the monorepo')
  .action(async () => {
    await tasks.run({ command: 'build' });
  });

program
  .command('deploy')
  .description('Deploy the monorepo')
  .action(async () => {
    await tasks.run({ command: 'deploy' });
  });

await program.parseAsync(process.argv);
</void></void></ctx></void></ctx></ctx>

Tugas dibahagikan kepada tugas membina dan menggunakan tugas. Memandangkan penyebaran memerlukan langkah membina, kami menggunakan harta yang diaktifkan untuk membolehkan tugas -tugas berdasarkan tugas berdasarkan pembentukan atau menggunakan arahan CLI. Setiap tugas melaksanakan arahan CLI yang sepadan dan paip outputnya ke konsol.

simpan skrip ini sebagai cli.ts dan jalankan dengan pnpm tsx cli:

Atas ialah kandungan terperinci TypeScript CLI: Automatikkan Binaan dan Pasang Skrip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!