Create Preset
Create Preset 工具箱 LogoCreate Preset一份源码，按需生成

模板只差几处，
也要维护多份？ 不需要！

公共代码维护一份，文件差异交给 Preset。创建项目时，选取目录、调整配置，生成需要的版本。

最佳实践 快速开始
create-preset npm 最新版本使用示例 GitHub
starter/维护这一份

src/main.ts

src/analytics.ts

package.json

basic.json

基础版

src/main.ts

src/analytics.ts −

team.json

团队版

src/main.ts

src/analytics.ts

公共代码改一处，版本差异留在配置里。

SOURCE → PRESET → PROJECT

工作场景不再繁琐

选择一个场景，看看文件如何变化。

模板差别不大，却要维护好几份？

手动维护基础版、团队版各复制一份源码。修一个问题，每份模板都要检查和修改。

使用 Create Preset共用一份源码，把文件和配置差异写进 Preset，创建时生成需要的版本。

app-starter
01

源文件

app-starter/
  • starter/src/main.ts修改
  • starter/src/analytics.ts排除
  • starter/package.json修改
src/main.ts
import { track } from './analytics'
 
track('app-started')
console.log('Hello')
02

配置差异

basic.json / 关键配置节选
{
  "source": {
    "directory": "starter"
  },
  "exclude": [
    "src/analytics.ts"
  ],
  "replace": [
    {
      "path": "src/main.ts",
      "from": "import { track } from './analytics'\n\ntrack('app-started')\n",
      "to": ""
    }
  ]
}
03

生成结果

2 个文件
my-basic-app/
  • src/main.ts修改
  • package.json修改
src/main.ts
console.log('Hello')
琥珀色标出需要处理的内容绿色标出生成时改写的行
Bash
pnpm create preset init my-basic-app --from ./presets/basic.json

虚构仓库演示 · 不会在浏览器中执行命令

查看完整示例

  • 实用性

    从入门模板到复杂项目均可支持。

  • 高效的

    减少每次创建新项目时的重复配置过程。

  • 交互式

    简单的命令行交互式操作。

  • 多技术栈

    提供常用的多种技术栈项目支持。

  • 项目定制

    同一模板可用于创建不同配置的项目。

  • 私有配置

    通过本地配置管理私有项目源。

简单体验

运行以下命令，并按照提示进行操作。

Bash
pnpm create preset

功能预览

选择 Vue 后可使用 Vue 官方 Starter 或 Nuxt。

$ pnpm create preset

create-preset
使用官方脚手架和声明式 Preset 创建项目。

项目名称: my-preset-app
选择技术栈: Vue
选择 Preset:
❯ Vue 官方 Starter ↗
  Nuxt ↗
Create Preset 1.0 的 Vue 选项。
快速开始