create-vite-npm-ts-template

English | 简体中文

A powerful, interactive, universal CLI scaffolding tool for generating robust NPM component libraries and web applications using TypeScript and Vite.

Why use this generator?

Instead of maintaining separate boilerplate repositories for different frameworks, this CLI dynamically scaffolds a package tailored to your exact needs. With a simple interactive prompt, you can generate:

• Pure Vanilla TypeScript packages/apps
• Vue 3 Component Libraries/Apps
• React Component Libraries/Apps
• Svelte Component Libraries/Apps
• Solid Component Libraries/Apps

Furthermore, the CLI automatically detects your chosen framework and allows you to seamlessly integrate popular UI component libraries (like Element Plus, Ant Design, Material UI, Vant, etc.) out of the box!

Features

• Interactive Prompts: Choose your project type (Library/Web App), JavaScript framework, matching UI library, CSS preprocessor (Sass/Less), and CSS framework (UnoCSS/TailwindCSS) on the fly.
• Vite Powered: Pre-configured Vite pipeline capable of emitting ESM, CJS, UMD, and IIFE formats for libraries, as well as index.d.ts declaration files using vite-plugin-dts.
• Auto Dependency Injection: The CLI dynamically injects the necessary Vite plugins (e.g., @vitejs/plugin-vue, @vitejs/plugin-react), peerDependencies, and devDependencies based on your selections.
• Zero Configuration TSX/JSX: Automatically writes the correct tsconfig.json rules for React or Solid JSX preservation.
• Built-in Visual Playground: Every scaffolded project automatically includes a miniature Vite server (pnpm dev) for real-time visual UI development and testing.
• Out-of-the-box Component Testing: Automatically configures Jest component tests tailored to your chosen framework (including test libraries and ESM resolution).
• Code Quality Built-in: All generated projects come fully equipped with Jest, ESLint, Prettier, Husky, Commitlint, and release-it for automated publishing.

Usage

You can instantly scaffold a new project without installing anything globally by using npx, pnpm dlx, or yarn dlx (or create commands):

npx create-vite-npm-ts-template my-component-library
# or
pnpm create vite-npm-ts-template@latest my-component-library
# or
yarn create vite-npm-ts-template@latest my-component-library

Non-Interactive / Silent Mode

You can bypass the interactive prompts entirely by passing the arguments directly via CLI flags:

npx create-vite-npm-ts-template --name=my-app --type=library --js=vue --ui=element-plus

Available flags:

• --name: The project name.
• --type: The project type (library, web).
• --js: The JS framework (none, vue, react, svelte, solid).
• --ui: The UI framework (none, element-plus, antd, @mui/material, vant, etc.).
• --css: The CSS preprocessor (none, sass, less).
• --css-fw: The CSS framework (none, unocss, tailwind).

Interactive Prompts

1. Project name: (e.g., my-component-library)
2. Project Type: (Library, Web Application)
3. JS Framework: (Vanilla TS, Vue 3, React, Svelte, Solid)
4. UI Framework: (Filtered intelligently based on your JS framework choice)
5. CSS Preprocessor: (None, Sass/SCSS, Less)
6. CSS Framework: (None, UnoCSS, TailwindCSS)
7. Git Initialization: (Automatically run git init)

Once scaffolding is complete, simply navigate into your new project, install dependencies, and start building:

cd my-component-library
pnpm install
pnpm dev   # Start visual playground
pnpm build # Build for production

Available UI Frameworks

The CLI currently supports automatic integration for the following UI libraries:

• Vue 3: Element Plus, Ant Design Vue, Vant
• React: Ant Design, Material UI (@mui/material)
• Svelte: Sveltestrap
• Solid: SUID (@suid/material)

(You can also choose "None" for any framework to get a pure, unstyled boilerplate).

Local Development

1. Clone the repository.
2. Install dependencies via pnpm install.
3. Modify the core logic in bin/index.js or the base boilerplate inside template/.
4. We use Husky and Commitlint to enforce Conventional Commits for the CLI's source code.
5. When ready to publish a new version of this CLI to NPM, you must log in to the official registry (if using a mirror like CNPM) and run pnpm release:

   npm login --registry=https://registry.npmjs.org/
   pnpm release

   (release-it will automatically bump the version, generate a git tag, and publish).

Testing Scripts

We provide automated test scripts to verify the scaffolding process without manual input. These scripts inject predefined prompt responses:

• node test-cli.js - Tests scaffolding a React + Ant Design project.
• node test-cli-vue.js - Tests scaffolding a Vue + Element Plus project.
• node test-cli-solid.js - Tests scaffolding a Solid + SUID project.

Commit Convention

This project enforces the Conventional Commits specification using commitlint. When you commit your changes, you must format your commit messages with specific prefixes. For example:

• feat: add a new feature
• fix: resolve a bug
• chore: update dependencies
• docs: update readme

If you don't follow this format, your commit will be rejected by the Git commit-msg hook.

License

MIT