Shopify 本地开发工作流程
配置本地开发环境，实现热重载、调试、测试的高效工作流
#type / howto
#status / growing
#tech / dev
#resource / shopify
[!info] related notes
- 前置笔记: Shopify 主题开发快速开始
- 相关 MOC: Shopify MOC
Shopify 本地开发工作流程
目标
建立高效的本地开发工作流，包括：
- 热重载（自动刷新）
- 调试工具
- 版本控制
- 测试流程
主题开发工作流
1. 启动开发服务器
shopify theme dev功能：
- 实时同步本地更改到 Shopify
- 自动刷新浏览器
- 显示 Liquid 错误
2. 使用 Git 版本控制
git init
git add .
git commit -m "Initial commit"最佳实践：
- 每个功能一个分支
- 提交前测试
- 使用有意义的提交信息
3. 调试 Liquid
在 Liquid 中输出变量：
{{ product | json }}或使用浏览器控制台：
<script>
console.log({{ product | json }});
</script>应用开发工作流
1. 启动应用
npm run dev2. 使用 Shopify CLI 隧道
自动创建 ngrok 隧道，无需手动配置
3. 调试 GraphQL
使用 Shopify GraphiQL App：
- 测试 GraphQL 查询
- 查看 Schema 文档