Strapi vanilla JavaScript 模板详解：create-strapi-app 脚手架结构、develop / start / build / deploy 命令与配置解析

Strapi vanilla JavaScript 模板详解：create-strapi-app 脚手架结构、develop / start / build / deploy 命令与配置解析

【免费下载链接】strapi🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.项目地址: https://gitcode.com/GitHub_Trending/st/strapi

当使用create-strapi-app创建一个不启用 TypeScript 的 Strapi 应用时，脚手架会自动套用仓库中的 vanilla-js 模板，生成的项目自带一套开箱即用的 npm scripts（develop、start、build、deploy等）与默认配置文件。本文以 vanilla-js 模板 README 为主线，完整覆盖其中讲解的三个核心运行命令与部署流程，并结合 模板目录结构、package.json 脚本定义 以及 create-strapi-app CLI 源码，说明这个 JavaScript 版模板是如何被选中、复制并运行起来的，帮助读者在拿到新项目后准确理解每个脚本的作用、每个配置项的默认值与修改位置。

模板的定位与触发条件

vanilla-js 模板是 Strapi 官方脚手架@strapi/create-strapi-app内置的四种本地模板之一，对应"原生 JavaScript（非 TypeScript）+ 空项目（非示例数据）"这一组合。从 create-strapi.ts 的模板选择逻辑可以看到，CLI 在未指定--template时按如下规则确定模板名：

// packages/cli/create-strapi-app/src/create-strapi.ts (L113-L123) if (!template) { let templateName = useExample ? 'example' : 'vanilla'; if (!useTypescript) { templateName = `${templateName}-js`; } const internalTemplatePath = join(__dirname, '../templates', templateName); if (await fse.exists(internalTemplatePath)) { await fse.copy(internalTemplatePath, rootPath); } }

也就是说，四个内置模板的映射关系为：

vanilla-js 模板与 vanilla 模板的差异体现在文件后缀与类型配置上：前者使用src/index.js、config/*.js并附带 jsconfig.json，后者使用src/index.ts、config/*.ts并附带tsconfig.json。

如果用户显式传入--template参数（本地路径、GitHub 仓库短写法或仓库地址），CLI 则不会使用内置模板，而是走 template.ts 中的copyTemplate流程：先通过isOfficialTemplate（template.ts#L213-L224）向 GitHub API 发 HEAD 请求确认该路径是否为 Strapi 官方仓库中的模板，官方模板则通过downloadGithubRepo（template.ts#L126-L174）下载仓库 tarball 并用tar.x解压出templates/<模板名>子目录，且带 3 次重试机制。自定义模板目录中必须存在package.json，否则 CLI 会直接报错终止（见 create-strapi.ts#L139-L141）。

模板的完整目录结构

vanilla-js 模板复制落地后，新项目的基础目录如下：

my-strapi-app/ ├── config/ │ ├── admin.js # 管理后台配置（认证、拖拽上传等） │ ├── api.js # REST API 配置（响应格式化、REST 策略等） │ ├── database.js # 数据库连接配置 │ ├── middlewares.js # 全局中间件配置 │ ├── plugins.js # 内置插件配置 │ └── server.js # 服务器监听配置 ├── database/ │ └── migrations/ # 数据库迁移脚本目录 ├── public/ │ ├── uploads/ # 静态上传文件目录 │ └── robots.txt ├── src/ │ ├── admin/ # 管理后台定制入口（app.example.js / vite.config.example.js） │ ├── api/ # 自定义 API（控制器、路由、服务） │ ├── extensions/ # 插件扩展点 │ └── index.js # 应用生命周期入口 ├── favicon.png ├── jsconfig.json └── package.json

其中config/下六个配置文件一一对应 Strapi 的各项核心配置，均以 CommonJS 方式导出一个接收{ env }的工厂函数；src/目录则承载应用生命周期入口与业务代码。此外 CLI 在复制模板后还会生成若干脚手架辅助文件：.env（由generateDotEnv写入，见 create-strapi.ts#L158）、.gitignore（create-strapi.ts#L226-L228），使用 Yarn 3+ 或 pnpm 时还会分别写入.yarnrc.yml/ pnpm workspace 配置。

package.json 中的脚本清单

模板自带的 package.json 只包含 scripts 段，所有脚本最终都委托给strapiCLI 执行：

{ "scripts": { "build": "strapi build", "deploy": "strapi deploy", "develop": "strapi develop", "dev": "strapi develop", "console": "strapi console", "start": "strapi start", "strapi": "strapi", "upgrade": "npx @strapi/upgrade latest", "upgrade:dry": "npx @strapi/upgrade latest --dry" } }

各脚本作用：

CLI 创建完成后打印的提示语（create-strapi.ts#L255-L280）也正是围绕develop、start、build、deploy四条命令展开，与模板 README 中的说明一致。

三个核心运行命令：develop、start、build

vanilla-js 模板 README 的核心内容是对这三个脚本的说明，它们分别覆盖开发、生产启动与管理后台构建三种场景。

develop：开启 autoReload 的开发模式

npm run develop # or yarn develop

develop以 watch 模式启动应用：Strapi 项目文件发生变化时会触发服务器重启，适合日常开发。注意package.json中的dev是develop的别名，两者等价。

start：关闭 autoReload 的生产模式

npm run start # or yarn start

start关闭 autoReload，用于生产环境启动。生产部署前通常先执行一次build，再用start拉起服务。

build：构建管理后台

npm run build # or yarn build

build会编译并打包 Strapi 管理后台的前端资源，产出可供start直接静态托管的 admin 构建产物。

三条命令在 npm 与 yarn 下均可运行（模板 README 对每条命令同时给出了两种包管理器的写法）。pnpm场景下可类推为pnpm run develop等。

应用生命周期入口：src/index.js

vanilla-js 模板的 src/index.js 定义了 Strapi 应用的两个生命周期钩子，完整内容如下：

'use strict'; module.exports = { /** * An asynchronous register function that runs before * your application is initialized. * * This gives you an opportunity to extend code. */ register(/*{ strapi }*/) {}, /** * An asynchronous bootstrap function that runs before * your application gets started. * * This gives you an opportunity to set up your data model, * run jobs, or perform some special logic. */ bootstrap(/*{ strapi }*/) {}, };

• register({ strapi })：在应用初始化之前执行，适合做能力扩展（如向 strapi 实例注入方法、注册全局逻辑）。
• bootstrap({ strapi })：在应用启动之前执行，适合初始化数据模型、运行一次性任务等。

新建的模板中两者均为空实现，业务代码在此处按需填充。

默认配置解析：database.js 与 server.js

模板的config/目录预置了 Strapi 全部核心配置，其中数据库与服务器两项决定了应用能否跑起来。

config/database.js：支持 sqlite / postgres / mysql 三种客户端

config/database.js 通过环境变量DATABASE_CLIENT在三种数据库客户端间切换，默认值为 sqlite（无需额外安装数据库服务即可开发），并对非法取值直接抛错：

const client = env('DATABASE_CLIENT', 'sqlite'); if (!isDatabaseClientKind(client)) { throw new Error( `Unsupported DATABASE_CLIENT: ${client}. Use "postgres", "mysql", or "sqlite".` ); }

三种客户端的关键参数与默认值（均读取脚手架生成的.env环境变量）：

另外 sqlite 分支设置了useNullAsDefault: true，postgres 分支同时支持DATABASE_URL连接串。切换数据库时只需修改.env中的DATABASE_CLIENT及对应变量，无需改动代码——这是该模板把配置全部参数化为环境变量的意义所在。

config/server.js：监听地址与关键开关

config/server.js 内容简短但覆盖了最常用的服务器级配置：

module.exports = ({ env }) => ({ host: env('HOST', '0.0.0.0'), port: env.int('PORT', 1337), app: { keys: env.array('APP_KEYS'), }, webhooks: { populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false), }, });

• HOST：默认监听0.0.0.0，便于容器化部署时被外部访问；
• PORT：Strapi 默认端口1337，应用启动后管理后台即位于http://localhost:1337/admin；
• APP_KEYS：应用密钥数组，由脚手架在生成.env时一并写入，用于签名与加密相关功能，是必填项；
• WEBHOOKS_POPULATE_RELATIONS：默认false，开启后 Webhook 事件负载会自动展开关联字段。

其余配置文件admin.js、api.js、middlewares.js、plugins.js同样以({ env }) => ({ ... })的形式导出，分别管理后台行为、REST API 行为、全局中间件与内置插件，可按需查阅 vanilla-js 模板 config 目录。

部署：strapi deploy

模板 README 的 Deployment 一节指出 Strapi 提供多种部署路径（其中包括 Strapi Cloud），并给出了一键部署命令：

yarn strapi deploy

该命令对应package.json中的deploy: strapi deploy脚本，即strapi deployCLI 命令，用于将项目部署到 Strapi Cloud。仓库内 CLI 侧的部署与云相关工具位于 packages/cli/cloud，其中 cloud.ts 封装了创建 Growth SSO 试用许可证等部署前置流程——例如创建应用时若启用了试用，CLI 会调用createGrowthSsoTrial并把 license 写入项目根目录（见 create-strapi.ts#L176-L187）。

创建后的典型工作流

综合模板 README 与 CLI 的收尾提示（create-strapi.ts#L282-L297），拿到 vanilla-js 项目后的标准流程为：

1. cd进入项目目录；若创建时跳过了依赖安装，先执行<包管理器> install；
2. npm run develop（或yarn develop）启动开发模式，浏览器访问管理后台完成初始化；
3. 生产环境先npm run build构建管理后台，再npm run start启动；
4. 需要上云时执行yarn strapi deploy；
5. 升级 Strapi 大版本时使用npm run upgrade（或先npm run upgrade:dry演练），迁移逻辑由 packages/utils/upgrade 提供；
6. 需要更多内置命令时，运行npm run strapi列出全部 CLI 命令。

小结与延伸阅读

vanilla-js 模板是 Strapi 面向 JavaScript 用户的最小可用脚手架：它以config/六个环境变量驱动的核心配置（默认 sqlite、端口 1337）+src/index.js双生命周期钩子 + 一组委托strapiCLI 的 npm scripts，覆盖了从开发到部署的完整链路。模板 README 中develop/start/build/deploy四条命令的语义，可以在 create-strapi.ts 的收尾提示与 package.json 的脚本定义中相互印证。

如需继续深入当前仓库，建议按以下路径阅读：

• 模板本体：packages/cli/create-strapi-app/templates/vanilla-js
• 脚手架主流程：packages/cli/create-strapi-app/src/create-strapi.ts
• 模板下载与校验：packages/cli/create-strapi-app/src/utils/template.ts
• 服务器端 API 文档：docs/docs/api/Strapi.mdx
• Strapi 核心概念文档：docs/docs/00-intro.md

【免费下载链接】strapi🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.项目地址: https://gitcode.com/GitHub_Trending/st/strapi