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 scriptsdevelop、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); } }也就是说四个内置模板的映射关系为交互选项模板目录TypeScript 空项目vanillaJavaScript 空项目vanilla-jsTypeScript 示例数据exampleJavaScript 示例数据example-jsvanilla-js 模板与 vanilla 模板的差异体现在文件后缀与类型配置上前者使用src/index.js、config/*.js并附带 jsconfig.json后者使用src/index.ts、config/*.ts并附带tsconfig.json。如果用户显式传入--template参数本地路径、GitHub 仓库短写法或仓库地址CLI 则不会使用内置模板而是走 template.ts 中的copyTemplate流程先通过isOfficialTemplatetemplate.ts#L213-L224向 GitHub API 发 HEAD 请求确认该路径是否为 Strapi 官方仓库中的模板官方模板则通过downloadGithubRepotemplate.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、.gitignorecreate-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 } }各脚本作用脚本等价命令说明develop/devstrapi develop开发模式启动开启 autoReloadwatchstartstrapi start生产模式启动关闭 autoReloadbuildstrapi build构建管理后台静态资源deploystrapi deploy部署到 Strapi Cloudconsolestrapi console打开交互式调试控制台strapistrapi透传 CLI可用npm run strapi -- 命令查看全部命令upgrade/upgrade:drynpx strapi/upgrade latest执行版本升级迁移--dry为演练模式只做检查不落盘。对应实现位于仓库 packages/utils/upgradeCLI 创建完成后打印的提示语create-strapi.ts#L255-L280也正是围绕develop、start、build、deploy四条命令展开与模板 README 中的说明一致。三个核心运行命令develop、start、buildvanilla-js 模板 README 的核心内容是对这三个脚本的说明它们分别覆盖开发、生产启动与管理后台构建三种场景。develop开启 autoReload 的开发模式npm run develop # or yarn developdevelop以 watch 模式启动应用Strapi 项目文件发生变化时会触发服务器重启适合日常开发。注意package.json中的dev是develop的别名两者等价。start关闭 autoReload 的生产模式npm run start # or yarn startstart关闭 autoReload用于生产环境启动。生产部署前通常先执行一次build再用start拉起服务。build构建管理后台npm run build # or yarn buildbuild会编译并打包 Strapi 管理后台的前端资源产出可供start直接静态托管的 admin 构建产物。三条命令在 npm 与 yarn 下均可运行模板 README 对每条命令同时给出了两种包管理器的写法。pnpm场景下可类推为pnpm run develop等。应用生命周期入口src/index.jsvanilla-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环境变量配置项默认值说明DATABASE_CLIENTsqlite客户端类型仅接受sqlite/postgres/mysqlDATABASE_HOSTlocalhost主机地址mysql / postgresDATABASE_PORTmysql 3306 / postgres 5432端口DATABASE_NAMEstrapi数据库名DATABASE_USERNAME/DATABASE_PASSWORDstrapi/strapi账号密码DATABASE_SSLfalse启用后读取DATABASE_SSL_KEY、DATABASE_SSL_CERT、DATABASE_SSL_CA、DATABASE_SSL_CAPATH、DATABASE_SSL_CIPHER、DATABASE_SSL_REJECT_UNAUTHORIZED默认trueDATABASE_SCHEMApublic仅 postgres 使用DATABASE_FILENAME.tmp/data.dbsqlite 数据文件实际路径为path.join(__dirname, .., 值)即项目根目录下的.tmp/data.dbDATABASE_POOL_MIN/DATABASE_POOL_MAX2 / 10mysql / postgres 连接池上下限DATABASE_CONNECTION_TIMEOUT60000获取连接的超时毫秒通过acquireConnectionTimeout生效另外 sqlite 分支设置了useNullAsDefault: truepostgres 分支同时支持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便于容器化部署时被外部访问PORTStrapi 默认端口1337应用启动后管理后台即位于http://localhost:1337/adminAPP_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 项目后的标准流程为cd进入项目目录若创建时跳过了依赖安装先执行包管理器 installnpm run develop或yarn develop启动开发模式浏览器访问管理后台完成初始化生产环境先npm run build构建管理后台再npm run start启动需要上云时执行yarn strapi deploy升级 Strapi 大版本时使用npm run upgrade或先npm run upgrade:dry演练迁移逻辑由 packages/utils/upgrade 提供需要更多内置命令时运行npm run strapi列出全部 CLI 命令。小结与延伸阅读vanilla-js 模板是 Strapi 面向 JavaScript 用户的最小可用脚手架它以config/六个环境变量驱动的核心配置默认 sqlite、端口 1337src/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.mdxStrapi 核心概念文档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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考