电商后端【免费下载链接】opencartA free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.项目地址https://gitcode.com/gh_mirrors/op/opencart点击查看免费下载导读本指南以 upload/assets/curlytag/AGENTS.md 为核心骨架面向在 OpenCart 仓库中开发 CurlyTagOpenCart 官方 Twig 替代模板引擎的开发者与 AI Agent系统讲解 Vite 统一工具链的全局 CLIvp的完整使用方式内置命令与 npm 脚本的区分、工具链版本管理、开发前检查清单并结合 package.json、vite.config.ts 与测试目录结构给出可复现的落地实践。读完本文你将能独立完成 CurlyTag 的安装、格式检查、测试运行、问题诊断与开发环境搭建。一、背景这份 AGENTS.md 服务的是谁AGENTS.md 是放置在仓库中、专门供开发协作尤其是 AI Agent阅读的项目工作约定文件。本仓库中这份文件位于upload/assets/curlytag/目录下服务对象是一个名为 CurlyTag 的浏览器端 JavaScript 模板引擎——它在 OpenCart 中的定位是服务端 Twig 模板引擎的替代方案其语法基于 Django、Nunjucks、Twig这一点在 curlytag.js 文件头注释中明确写明/* * CurlyTwig * * description Template engine * * author Daniel Kerr * * OpenCart Twig replacement. Based on Django, Nunjucks, Twig template syntax. */从仓库结构可以推断CurlyTag 作为独立 npm 包curlytag/curlytag见 package.json被内置到 OpenCart 的upload/assets/目录中用于前端模板渲染场景例如 playground/examples/category/template.html 中的商品详情模板{% if price %} lih2span classprice-newx-currency code{{ currency }} amount{{ price }}/x-currency/span/h2/li {% endif %} {% for discount in discounts %} li{{ discount.quantity }}{{ text_discount }} x-currency code{{ currency }} amount{{ discount.price }}/x-currency/li {% endfor %}而这份 AGENTS.md 的职责非常聚焦告诉开发者和 Agent 如何用 Vite 统一工具链来规范化地开发、检查、测试这个项目。它本身不含模板语法教学而是完整的工程化工作流约定——这正是本文要展开的核心内容。二、Vite 是什么一套 CLI 收编全部前端工具AGENTS.md 开门见山地定义了 Vite 的定位This project is using Vite, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite wraps runtime management, package management, and frontend tooling in a single global CLI calledvp.即Vite 是一个构建在 Vite、Rolldown、Vitest、tsdown、Oxlint、Oxfmt、Vite Task 之上的统一工具链将运行时管理、包管理与前端工具全部收敛到唯一的全局 CLIvp之下。结合 package.json 的 devDependenciesvite-plus: ^0.2.9、vitest/browser、vitest/browser-playwright、eslint、playwright等可以印证Oxfmt负责格式化配合 ESLint Stylistic 做 JS 风格检查Oxlint负责代码检查Vitest Playwright负责跨浏览器Chromium、Firefox、WebKit测试Vite Task / vite.config.ts承载自定义任务。关键区分点AGENTS.md 原文强调Vite 不是 Vite。它通过vp dev和vp build间接调用 Vite因此不要用裸vite命令代替。文档位置AGENTS.md 明确说明Vite 的完整文档位于本地node_modules/vite-plus/docs目录或在线文档站点。在日常开发中优先查阅本地文档可以避免版本漂移问题。三、命令总览先看帮助再动手vp help # 打印全部可用命令列表 vp command --help # 查看某个具体命令的参数说明AGENTS.md 建议在不确定命令行为时先执行上述两条命令获取权威信息。以 package.json 中的实际脚本为参照vp在本项目中最常用的子命令包括命令作用vp dev启动开发服务器Vite dev serverroot 指向playground/vp build生产构建输出到dist/见 vite.config.ts 的build.outDirvp install安装依赖vp check格式化 lint 类型检查vp test运行测试Vitestvp toolchain查看工具链各工具版本及关系vp why package查看包管理器依赖图vp env doctor诊断环境/运行时/包管理器问题vp config配置项目如提交钩子、commit hooksvp exec cmd在项目环境中执行任意命令如vp exec eslint .vp run name运行package.json脚本或vite.config.ts中定义的任务四、核心概念内置命令 vs 脚本Built-in Commands vs Scripts这是整份 AGENTS.md 中最容易踩坑、也最值得深挖的一条规则vp nameruns a built-in command.vp run nameruns apackage.jsonscript or avite.config.tstask. Scripts cannot overwrite built-ins, sovp devandvp run devmay do different things. Checkpackage.jsonandvite.config.tsfirst, and runvp run namewhen the project defines a script or task with that name.拆解要点vp name永远执行内置命令例如vp dev启动的是 Vite 内置的 dev 服务器行为由 Vite 内部定义vp run name执行项目自定义脚本/任务优先查找package.json的scripts字段其次是vite.config.ts中的任务定义脚本不能覆盖内置命令即使你在package.json里定义了名为dev的脚本vp dev也不会去执行它——脚本与内置命令同名时只有vp run dev才会命中你的脚本因此vp dev与vp run dev可能是两回事。以本仓库 package.json 为例其scripts字段定义了scripts: { check: vp check vp run fmt:js:check, lint: vp lint, fmt: vp fmt vp run fmt:js, fmt:js: vp exec eslint . --fix, fmt:js:check: vp exec eslint ., test: vp test, prepare: vp config, release: changelogen --release }注意脚本内部又嵌套了vp check、vp fmt、vp lint等内置命令——这正好体现了内置命令 项目脚本两层协作的模式项目脚本负责组合编排内置命令负责具体执行。实操建议原文强调在运行任何vp name之前先检查package.json的scripts与vite.config.ts是否定义了同名脚本/任务若定义了使用vp run name以命中项目约定。五、工具版本管理vp toolchain与vp whyAGENTS.md 提供了两条版本诊断命令5.1vp toolchain—— 查看工具链版本关系vp toolchain # 显示当前 Vite release 下所有工具的版本与相互关系 vp toolchain vite # 只显示 vite 在工具链图上的版本信息 vp toolchain --global # 忽略本地 vite-plus 包使用全局安装版本--global参数特别有用当本地node_modules中的vite-plus未安装或版本异常时可以回退查看全局工具链状态。5.2vp why package—— 查看依赖来源vp why package # 显示某个包在包管理器中的依赖图帮助定位依赖来源当遇到某个依赖为什么被安装、被谁引入、为什么是这个版本这类问题时vp why比直接翻package-lock.json更直观。六、Review Checklist开发前后的标准动作AGENTS.md 给出了四步强制检查清单这是每个 PR 提交前必须走完的流程- [ ] Run vp install after pulling remote changes and before getting started. - [ ] Run vp check and vp test to format, lint, type check and test changes. - [ ] Check if there are vite.config.ts tasks or package.json scripts necessary for validation, run via vp run script. - [ ] If setup, runtime, or package-manager behavior looks wrong, run vp env doctor and include its output when asking for help.第 1 步vp install拉取远端变更后、开始工作前先执行vp install同步依赖。这与 Vite 统一运行时管理 包管理的定位一致确保本地环境与锁文件本仓库使用 npmpackageManager: npm11.13.0保持一致。第 2 步vp check与vp testvp check一键执行格式化检查、lint、类型检查。在本项目中它对应 package.json 的check脚本编排vp check vp run fmt:js:check即内置检查通过后再用 ESLint Stylistic 校验 JS 风格vp test运行 Vitest 测试套件。CurlyTag 的测试通过 vite.config.ts 配置为浏览器项目测试目标覆盖三个内核test: { projects: [ { test: { name: browser, include: [../tests/**/*.test.js], browser: { enabled: true, headless: true, provider: playwright(), instances: [ { browser: chromium }, { browser: firefox }, { browser: webkit }, ], }, }, }, ], },从tests/目录结构可以看出测试的覆盖面tests/tags/if、for、case、capture、cycle、raw 等标签行为、tests/filters/数组、字符串、数学、HTML、URL 过滤器、tests/output/纯文本与{{ }}变量渲染以及集成级的 render.test.js 与 add-filter.test.js。第 3 步校验脚本/任务检查是否存在vite.config.ts任务或package.json脚本需要执行统一用vp run script运行。结合第二节的内置命令 vs 脚本规则这一步是防止漏跑项目自定义校验的关键。第 4 步vp env doctor当 setup、运行时或包管理器行为异常时运行vp env doctor并把它的输出附在求助信息中。这条约定对 AI Agent 尤为重要——诊断输出是定位环境问题的第一手证据避免来回猜测。七、把清单落进真实项目脚本与配置的逐项对照为了让上面的清单可执行这里将 AGENTS.md 的规则映射到 CurlyTag 的实际配置上7.1 格式化配置vite.config.tsfmt: { tabWidth: 4, singleQuote: true, ignorePatterns: [ **/*.js, **/*.md, **/*.yml, **/*.yaml, **/*.json, playground/examples/**/template.html, tests/fixtures/storefront/format.html, docs/.vitepress/cache/**, ], },缩进 4 空格、单引号与 eslint.config.js 中indent: 4, quotes: single保持一致JS、MD、JSON 等文件被明确排除在 Oxfmt 之外交给 ESLint Stylistic 处理对应fmt:js脚本vp exec eslint . --fix示例模板与格式测试夹具被排除避免格式化破坏教学示例或测试预期输出。7.2 Lint 规则微调eslint.config.jsrules: { eqeqeq: off, no-with: off, },eqeqeq: off允许与no-with: off允许with是模板引擎特有的放宽——模板解析场景需要宽松的比较与作用域处理这类豁免体现了工具链服务于项目语义的取舍。7.3 提交钩子staged 任务staged: { *: vp check --fix, **/*.js: vp exec eslint --fix, },vp config对应prepare脚本会安装提交钩子暂存区文件在提交前自动跑vp check --fixJS 文件再额外过一遍 ESLint 自动修复——这就是 AGENTS.md 强调的格式化、lint、类型检查、测试在提交链路中的落地。八、测试布局与 Playground开发时的两条主线8.1 测试组织约定README 与目录结构双重印证README.md 与tests/目录共同确认了测试布局原则——按功能拆分到小文件禁止膨胀成单体大测试文件tests/output/纯输出与{{ }}变量渲染测试tests/filters/过滤器测试数组过滤器在tests/filters/array/下compact、groupby、map、uniq、slice、sum 等tests/tags/标签行为测试if、for、case、capture、raw、whitespace-control 等顶层render.test.js、add-filter.test.js承担跨功能集成行为测试。新增过滤器或标签时应新建/扩展对应目录下的聚焦文件而不是把用例堆进一个curlytag.test.js。从 for.test.js 可以看到典型用例风格test(loop.index starts at 1, () { expect( curlytag.parse({% for x in items %}{{ loop.index }}{% endfor %}, { items: [a, b], }) ).toBe(12); });8.2 Playground交互式开发入口vp devVite 依据 vite.config.ts 的root: playground从playground/目录伺服页面其中预置了 category、conditions、filters、loop、nested 等带template.htmldata.json配对的示例方便在编辑器中即时验证模板渲染结果。8.3 看板模式与测试 UIvp test --project browser --watch # 文件变更自动重跑 vp test --project browser --ui --watch # 浏览器 UI 交互式探索注意--ui必须与--watch搭配使用否则测试跑完 UI 服务器随即退出README 明确提示。九、完整命令速查表场景命令拉取变更后同步依赖vp install查看全部命令vp help查看单命令帮助vp command --help格式化 lint 类型检查vp check项目全量校验含 JS 风格vp run check运行测试三浏览器一次vp test --project browser监听模式测试vp test --project browser --watch测试 UI 模式vp test --project browser --ui --watch启动 Playgroundvp dev查看工具链版本vp toolchain [tool] [--global]查看包依赖图vp why package环境诊断vp env doctor安装提交钩子vp config安装测试浏览器vp exec playwright install chromium firefox webkit手动跑 ESLint 并修复vp exec eslint . --fix十、给 Agent 与开发者的三条关键提醒先查脚本再跑命令同名的vp dev与vp run dev行为可能不同脚本永远无法覆盖内置命令——先看package.json与vite.config.ts环境问题先自诊setup、运行时或包管理器行为异常时先跑vp env doctor把输出附在提问中能显著提升问题定位效率检查清单是硬性门槛vp install → vp check vp test → 校验项目脚本 → vp env doctor四步是每次变更进入提交前的标准动作直接决定了 CI对应仓库中的 CI 工作流能否顺利通过。附相关文件索引本文主文档upload/assets/curlytag/AGENTS.md项目脚本与依赖upload/assets/curlytag/package.jsonVite 配置构建/测试/格式化/提交钩子upload/assets/curlytag/vite.config.tsESLint Stylistic 风格规则upload/assets/curlytag/eslint.config.js项目 README开发工作流与测试布局upload/assets/curlytag/README.md模板引擎核心实现OpenCart Twig 替代upload/assets/curlytag/curlytag.js商品详情模板示例upload/assets/curlytag/playground/examples/category/template.html测试入口三浏览器矩阵配置见vite.config.tsupload/assets/curlytag/tests/tags/for.test.js、upload/assets/curlytag/tests/render.test.js赞分享电商后端【免费下载链接】opencartA free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.项目地址https://gitcode.com/gh_mirrors/op/opencart点击查看免费下载相关推荐OpenCart 前端模板引擎 CurlyTag 实战指南从安装、语法到源码级原理与测试体系OpenCart 前端模板引擎 CurlyTag 实战指南从安装、语法到源码级原理与测试体系 CurlyTag 是 OpenCart 项目中内置的开放源码浏览电商后端OpenCart 模板引擎演进CurlyTag 0.1.1 版本更新与浏览器端模板技术解析OpenCart 模板引擎演进CurlyTag 0.1.1 版本更新与浏览器端模板技术解析 CurlyTag 是 OpenCart 项目内置的浏览器端 Jav电商后端React Email Editor与Vite下一代前端工具链集成指南React Email Editor与Vite下一代前端工具链集成指南 React Email Editor 是一个强大的拖拽式邮件编辑器组件基于 Unla前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenCart 前端模板引擎 CurlyTag 的 Vite+ 统一工具链实战指南（AGENTS.md 深度解读）
电商后端【免费下载链接】opencartA free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.项目地址https://gitcode.com/gh_mirrors/op/opencart点击查看免费下载导读本指南以 upload/assets/curlytag/AGENTS.md 为核心骨架面向在 OpenCart 仓库中开发 CurlyTagOpenCart 官方 Twig 替代模板引擎的开发者与 AI Agent系统讲解 Vite 统一工具链的全局 CLIvp的完整使用方式内置命令与 npm 脚本的区分、工具链版本管理、开发前检查清单并结合 package.json、vite.config.ts 与测试目录结构给出可复现的落地实践。读完本文你将能独立完成 CurlyTag 的安装、格式检查、测试运行、问题诊断与开发环境搭建。一、背景这份 AGENTS.md 服务的是谁AGENTS.md 是放置在仓库中、专门供开发协作尤其是 AI Agent阅读的项目工作约定文件。本仓库中这份文件位于upload/assets/curlytag/目录下服务对象是一个名为 CurlyTag 的浏览器端 JavaScript 模板引擎——它在 OpenCart 中的定位是服务端 Twig 模板引擎的替代方案其语法基于 Django、Nunjucks、Twig这一点在 curlytag.js 文件头注释中明确写明/* * CurlyTwig * * description Template engine * * author Daniel Kerr * * OpenCart Twig replacement. Based on Django, Nunjucks, Twig template syntax. */从仓库结构可以推断CurlyTag 作为独立 npm 包curlytag/curlytag见 package.json被内置到 OpenCart 的upload/assets/目录中用于前端模板渲染场景例如 playground/examples/category/template.html 中的商品详情模板{% if price %} lih2span classprice-newx-currency code{{ currency }} amount{{ price }}/x-currency/span/h2/li {% endif %} {% for discount in discounts %} li{{ discount.quantity }}{{ text_discount }} x-currency code{{ currency }} amount{{ discount.price }}/x-currency/li {% endfor %}而这份 AGENTS.md 的职责非常聚焦告诉开发者和 Agent 如何用 Vite 统一工具链来规范化地开发、检查、测试这个项目。它本身不含模板语法教学而是完整的工程化工作流约定——这正是本文要展开的核心内容。二、Vite 是什么一套 CLI 收编全部前端工具AGENTS.md 开门见山地定义了 Vite 的定位This project is using Vite, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite wraps runtime management, package management, and frontend tooling in a single global CLI calledvp.即Vite 是一个构建在 Vite、Rolldown、Vitest、tsdown、Oxlint、Oxfmt、Vite Task 之上的统一工具链将运行时管理、包管理与前端工具全部收敛到唯一的全局 CLIvp之下。结合 package.json 的 devDependenciesvite-plus: ^0.2.9、vitest/browser、vitest/browser-playwright、eslint、playwright等可以印证Oxfmt负责格式化配合 ESLint Stylistic 做 JS 风格检查Oxlint负责代码检查Vitest Playwright负责跨浏览器Chromium、Firefox、WebKit测试Vite Task / vite.config.ts承载自定义任务。关键区分点AGENTS.md 原文强调Vite 不是 Vite。它通过vp dev和vp build间接调用 Vite因此不要用裸vite命令代替。文档位置AGENTS.md 明确说明Vite 的完整文档位于本地node_modules/vite-plus/docs目录或在线文档站点。在日常开发中优先查阅本地文档可以避免版本漂移问题。三、命令总览先看帮助再动手vp help # 打印全部可用命令列表 vp command --help # 查看某个具体命令的参数说明AGENTS.md 建议在不确定命令行为时先执行上述两条命令获取权威信息。以 package.json 中的实际脚本为参照vp在本项目中最常用的子命令包括命令作用vp dev启动开发服务器Vite dev serverroot 指向playground/vp build生产构建输出到dist/见 vite.config.ts 的build.outDirvp install安装依赖vp check格式化 lint 类型检查vp test运行测试Vitestvp toolchain查看工具链各工具版本及关系vp why package查看包管理器依赖图vp env doctor诊断环境/运行时/包管理器问题vp config配置项目如提交钩子、commit hooksvp exec cmd在项目环境中执行任意命令如vp exec eslint .vp run name运行package.json脚本或vite.config.ts中定义的任务四、核心概念内置命令 vs 脚本Built-in Commands vs Scripts这是整份 AGENTS.md 中最容易踩坑、也最值得深挖的一条规则vp nameruns a built-in command.vp run nameruns apackage.jsonscript or avite.config.tstask. Scripts cannot overwrite built-ins, sovp devandvp run devmay do different things. Checkpackage.jsonandvite.config.tsfirst, and runvp run namewhen the project defines a script or task with that name.拆解要点vp name永远执行内置命令例如vp dev启动的是 Vite 内置的 dev 服务器行为由 Vite 内部定义vp run name执行项目自定义脚本/任务优先查找package.json的scripts字段其次是vite.config.ts中的任务定义脚本不能覆盖内置命令即使你在package.json里定义了名为dev的脚本vp dev也不会去执行它——脚本与内置命令同名时只有vp run dev才会命中你的脚本因此vp dev与vp run dev可能是两回事。以本仓库 package.json 为例其scripts字段定义了scripts: { check: vp check vp run fmt:js:check, lint: vp lint, fmt: vp fmt vp run fmt:js, fmt:js: vp exec eslint . --fix, fmt:js:check: vp exec eslint ., test: vp test, prepare: vp config, release: changelogen --release }注意脚本内部又嵌套了vp check、vp fmt、vp lint等内置命令——这正好体现了内置命令 项目脚本两层协作的模式项目脚本负责组合编排内置命令负责具体执行。实操建议原文强调在运行任何vp name之前先检查package.json的scripts与vite.config.ts是否定义了同名脚本/任务若定义了使用vp run name以命中项目约定。五、工具版本管理vp toolchain与vp whyAGENTS.md 提供了两条版本诊断命令5.1vp toolchain—— 查看工具链版本关系vp toolchain # 显示当前 Vite release 下所有工具的版本与相互关系 vp toolchain vite # 只显示 vite 在工具链图上的版本信息 vp toolchain --global # 忽略本地 vite-plus 包使用全局安装版本--global参数特别有用当本地node_modules中的vite-plus未安装或版本异常时可以回退查看全局工具链状态。5.2vp why package—— 查看依赖来源vp why package # 显示某个包在包管理器中的依赖图帮助定位依赖来源当遇到某个依赖为什么被安装、被谁引入、为什么是这个版本这类问题时vp why比直接翻package-lock.json更直观。六、Review Checklist开发前后的标准动作AGENTS.md 给出了四步强制检查清单这是每个 PR 提交前必须走完的流程- [ ] Run vp install after pulling remote changes and before getting started. - [ ] Run vp check and vp test to format, lint, type check and test changes. - [ ] Check if there are vite.config.ts tasks or package.json scripts necessary for validation, run via vp run script. - [ ] If setup, runtime, or package-manager behavior looks wrong, run vp env doctor and include its output when asking for help.第 1 步vp install拉取远端变更后、开始工作前先执行vp install同步依赖。这与 Vite 统一运行时管理 包管理的定位一致确保本地环境与锁文件本仓库使用 npmpackageManager: npm11.13.0保持一致。第 2 步vp check与vp testvp check一键执行格式化检查、lint、类型检查。在本项目中它对应 package.json 的check脚本编排vp check vp run fmt:js:check即内置检查通过后再用 ESLint Stylistic 校验 JS 风格vp test运行 Vitest 测试套件。CurlyTag 的测试通过 vite.config.ts 配置为浏览器项目测试目标覆盖三个内核test: { projects: [ { test: { name: browser, include: [../tests/**/*.test.js], browser: { enabled: true, headless: true, provider: playwright(), instances: [ { browser: chromium }, { browser: firefox }, { browser: webkit }, ], }, }, }, ], },从tests/目录结构可以看出测试的覆盖面tests/tags/if、for、case、capture、cycle、raw 等标签行为、tests/filters/数组、字符串、数学、HTML、URL 过滤器、tests/output/纯文本与{{ }}变量渲染以及集成级的 render.test.js 与 add-filter.test.js。第 3 步校验脚本/任务检查是否存在vite.config.ts任务或package.json脚本需要执行统一用vp run script运行。结合第二节的内置命令 vs 脚本规则这一步是防止漏跑项目自定义校验的关键。第 4 步vp env doctor当 setup、运行时或包管理器行为异常时运行vp env doctor并把它的输出附在求助信息中。这条约定对 AI Agent 尤为重要——诊断输出是定位环境问题的第一手证据避免来回猜测。七、把清单落进真实项目脚本与配置的逐项对照为了让上面的清单可执行这里将 AGENTS.md 的规则映射到 CurlyTag 的实际配置上7.1 格式化配置vite.config.tsfmt: { tabWidth: 4, singleQuote: true, ignorePatterns: [ **/*.js, **/*.md, **/*.yml, **/*.yaml, **/*.json, playground/examples/**/template.html, tests/fixtures/storefront/format.html, docs/.vitepress/cache/**, ], },缩进 4 空格、单引号与 eslint.config.js 中indent: 4, quotes: single保持一致JS、MD、JSON 等文件被明确排除在 Oxfmt 之外交给 ESLint Stylistic 处理对应fmt:js脚本vp exec eslint . --fix示例模板与格式测试夹具被排除避免格式化破坏教学示例或测试预期输出。7.2 Lint 规则微调eslint.config.jsrules: { eqeqeq: off, no-with: off, },eqeqeq: off允许与no-with: off允许with是模板引擎特有的放宽——模板解析场景需要宽松的比较与作用域处理这类豁免体现了工具链服务于项目语义的取舍。7.3 提交钩子staged 任务staged: { *: vp check --fix, **/*.js: vp exec eslint --fix, },vp config对应prepare脚本会安装提交钩子暂存区文件在提交前自动跑vp check --fixJS 文件再额外过一遍 ESLint 自动修复——这就是 AGENTS.md 强调的格式化、lint、类型检查、测试在提交链路中的落地。八、测试布局与 Playground开发时的两条主线8.1 测试组织约定README 与目录结构双重印证README.md 与tests/目录共同确认了测试布局原则——按功能拆分到小文件禁止膨胀成单体大测试文件tests/output/纯输出与{{ }}变量渲染测试tests/filters/过滤器测试数组过滤器在tests/filters/array/下compact、groupby、map、uniq、slice、sum 等tests/tags/标签行为测试if、for、case、capture、raw、whitespace-control 等顶层render.test.js、add-filter.test.js承担跨功能集成行为测试。新增过滤器或标签时应新建/扩展对应目录下的聚焦文件而不是把用例堆进一个curlytag.test.js。从 for.test.js 可以看到典型用例风格test(loop.index starts at 1, () { expect( curlytag.parse({% for x in items %}{{ loop.index }}{% endfor %}, { items: [a, b], }) ).toBe(12); });8.2 Playground交互式开发入口vp devVite 依据 vite.config.ts 的root: playground从playground/目录伺服页面其中预置了 category、conditions、filters、loop、nested 等带template.htmldata.json配对的示例方便在编辑器中即时验证模板渲染结果。8.3 看板模式与测试 UIvp test --project browser --watch # 文件变更自动重跑 vp test --project browser --ui --watch # 浏览器 UI 交互式探索注意--ui必须与--watch搭配使用否则测试跑完 UI 服务器随即退出README 明确提示。九、完整命令速查表场景命令拉取变更后同步依赖vp install查看全部命令vp help查看单命令帮助vp command --help格式化 lint 类型检查vp check项目全量校验含 JS 风格vp run check运行测试三浏览器一次vp test --project browser监听模式测试vp test --project browser --watch测试 UI 模式vp test --project browser --ui --watch启动 Playgroundvp dev查看工具链版本vp toolchain [tool] [--global]查看包依赖图vp why package环境诊断vp env doctor安装提交钩子vp config安装测试浏览器vp exec playwright install chromium firefox webkit手动跑 ESLint 并修复vp exec eslint . --fix十、给 Agent 与开发者的三条关键提醒先查脚本再跑命令同名的vp dev与vp run dev行为可能不同脚本永远无法覆盖内置命令——先看package.json与vite.config.ts环境问题先自诊setup、运行时或包管理器行为异常时先跑vp env doctor把输出附在提问中能显著提升问题定位效率检查清单是硬性门槛vp install → vp check vp test → 校验项目脚本 → vp env doctor四步是每次变更进入提交前的标准动作直接决定了 CI对应仓库中的 CI 工作流能否顺利通过。附相关文件索引本文主文档upload/assets/curlytag/AGENTS.md项目脚本与依赖upload/assets/curlytag/package.jsonVite 配置构建/测试/格式化/提交钩子upload/assets/curlytag/vite.config.tsESLint Stylistic 风格规则upload/assets/curlytag/eslint.config.js项目 README开发工作流与测试布局upload/assets/curlytag/README.md模板引擎核心实现OpenCart Twig 替代upload/assets/curlytag/curlytag.js商品详情模板示例upload/assets/curlytag/playground/examples/category/template.html测试入口三浏览器矩阵配置见vite.config.tsupload/assets/curlytag/tests/tags/for.test.js、upload/assets/curlytag/tests/render.test.js赞分享电商后端【免费下载链接】opencartA free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.项目地址https://gitcode.com/gh_mirrors/op/opencart点击查看免费下载相关推荐OpenCart 前端模板引擎 CurlyTag 实战指南从安装、语法到源码级原理与测试体系OpenCart 前端模板引擎 CurlyTag 实战指南从安装、语法到源码级原理与测试体系 CurlyTag 是 OpenCart 项目中内置的开放源码浏览电商后端OpenCart 模板引擎演进CurlyTag 0.1.1 版本更新与浏览器端模板技术解析OpenCart 模板引擎演进CurlyTag 0.1.1 版本更新与浏览器端模板技术解析 CurlyTag 是 OpenCart 项目内置的浏览器端 Jav电商后端React Email Editor与Vite下一代前端工具链集成指南React Email Editor与Vite下一代前端工具链集成指南 React Email Editor 是一个强大的拖拽式邮件编辑器组件基于 Unla前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
