打造专属 CLI 脚手架：TS 和 ESBuild 的强强联手**

2024-02-20 00:42:24

在前端开发的浪潮中，效率和速度成为了开发者们追求的目标。为了提升开发效率，脚手架工具应运而生，帮助开发者快速搭建项目框架，省去繁琐的初始化工作。而 TypeScript 和 ESBuild 作为前端领域的两款利器，更是为构建高效、可靠的脚手架提供了强大的支持。

TypeScript 作为 JavaScript 的超集，引入了静态类型检查，可以在编译阶段发现代码中的错误，提高代码的健壮性和可维护性。ESBuild 则是一款速度极快的 JavaScript 打包工具，能够显著提升构建速度，缩短开发周期。

那么，如何利用 TypeScript 和 ESBuild 构建一个属于自己的 CLI 脚手架呢？

首先，我们需要安装 TypeScript 和 ESBuild。打开终端，输入以下命令：

npm install -g typescript esbuild

这行命令会将 TypeScript 和 ESBuild 安装到全局环境中，方便我们在任何项目中使用。

接下来，创建一个新的项目文件夹，例如 my-cli，并进入该文件夹：

mkdir my-cli
cd my-cli

使用 TypeScript 初始化项目：

tsc --init

这会在项目根目录下生成一个 tsconfig.json 文件，用于配置 TypeScript 编译选项。

现在，我们可以在 src 目录下创建一个名为 index.ts 的文件，作为脚手架的入口文件。在这个文件中，我们可以使用 commander 库来定义脚手架的命令和选项。

import { program } from 'commander';

program
  .version('1.0.0')
  .description('My CLI scaffold');

program
  .command('create <project-name>')
  .description('Create a new project')
  .action((projectName) => {
    // 在这里编写创建新项目的逻辑
    console.log(`Creating project ${projectName}...`);
  });

program.parse(process.argv);

这段代码定义了一个名为 create 的命令，用于创建一个新的项目。当用户执行 my-cli create my-project 时，程序会输出 "Creating project my-project..."。

接下来，我们需要使用 ESBuild 将 TypeScript 代码打包成 JavaScript 代码。在项目根目录下创建一个名为 build.js 的文件，并写入以下内容：

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.ts'],
  outfile: 'dist/index.js',
  platform: 'node',
  bundle: true,
}).catch(() => process.exit(1));

这段代码会将 src/index.ts 文件打包成 dist/index.js 文件，并将其设置为 Node.js 环境下运行。

为了方便使用，我们可以在 package.json 文件中添加一些脚本：

{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "My CLI scaffold",
  "main": "dist/index.js",
  "scripts": {
    "build": "node build.js",
    "start": "node dist/index.js"
  },
  "dependencies": {
    "commander": "^9.4.1"
  },
  "devDependencies": {
    "esbuild": "^0.15.13",
    "typescript": "^4.8.4"
  }
}