开发环境搭建

在开始 Shopify Liquid 开发之前，我们需要搭建一个完整的开发环境。这个指南将帮助您配置所有必要的工具和软件。

系统要求

操作系统支持

Windows: Windows 10 或更高版本
macOS: macOS 10.15 或更高版本
Linux: Ubuntu 18.04+ 或其他主流发行版

硬件要求

RAM: 至少 4GB，推荐 8GB 或更多
存储: 至少 2GB 可用空间
网络: 稳定的网络连接

必备软件安装

1. Node.js 安装

Node.js 是运行 Shopify CLI 的必要环境。

Windows/macOS


# 访问官网下载安装包
https://nodejs.org/
 
# 或使用包管理器安装
# macOS (使用 Homebrew)
brew install node
 
# Windows (使用 Chocolatey)
choco install nodejs

Linux (Ubuntu/Debian)


# 使用 NodeSource 仓库安装最新版本
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# 验证安装
node --version
npm --version

2. Git 版本控制

Git 是管理代码版本的必备工具。

Windows


# 下载 Git for Windows
https://git-scm.com/download/win
 
# 或使用 Chocolatey
choco install git

macOS


# 使用 Xcode Command Line Tools
xcode-select --install
 
# 或使用 Homebrew
brew install git

Linux


# Ubuntu/Debian
sudo apt update
sudo apt install git
 
# CentOS/RHEL
sudo yum install git

3. 代码编辑器推荐

Visual Studio Code (推荐)


# 下载安装
https://code.visualstudio.com/
 
# 必装扩展
- Shopify Liquid
- Liquid Languages Support
- Shopify Theme Inspector
- GitLens
- Prettier

VS Code 扩展配置


// settings.json
{
  "liquid.format.enable": true,
  "files.associations": {
    "*.liquid": "liquid"
  },
  "emmet.includeLanguages": {
    "liquid": "html"
  },
  "liquid.engine": "shopify"
}

其他编辑器选择

Sublime Text: 轻量级，支持 Liquid 语法高亮
Atom: GitHub 开发的编辑器
WebStorm: JetBrains 的专业 IDE

浏览器开发工具

Chrome DevTools

Chrome 是 Shopify 开发的首选浏览器，提供强大的开发工具。

有用的 Chrome 扩展


# Shopify Theme Inspector for Chrome
https://chrome.google.com/webstore/detail/shopify-theme-inspector/fndnankcflemoafdeboboehphmiijkgp
 
# React Developer Tools (用于调试)
# Redux DevTools (如果使用 Redux)
# Lighthouse (性能分析)

Firefox Developer Edition

Firefox 的开发者版本也是很好的选择。

开发环境验证

创建一个测试文件来验证环境是否正确配置：


# 创建测试目录
mkdir shopify-dev-test
cd shopify-dev-test
 
# 初始化 npm 项目
npm init -y
 
# 创建测试文件
touch test.js


// test.js
console.log('Node.js version:', process.version);
console.log('开发环境配置成功！');


# 运行测试
node test.js

可选工具推荐

1. 终端工具

Windows

Windows Terminal: 现代化的终端应用
Git Bash: 提供 Unix 风格的命令行
PowerShell Core: 跨平台的 PowerShell

macOS/Linux

iTerm2 (macOS): 功能强大的终端替代品
Zsh + Oh My Zsh: 增强的 shell 体验

2. API 测试工具


# Postman - API 测试和开发
https://www.postman.com/
 
# Insomnia - 轻量级 REST 客户端  
https://insomnia.rest/
 
# curl - 命令行 HTTP 客户端
# 通常系统自带或可通过包管理器安装

3. 图像处理工具


# ImageOptim (macOS) - 图像压缩
# TinyPNG - 在线图像压缩
# GIMP - 免费的图像编辑软件

网络配置

代理设置 (如需要)


# 设置 npm 代理
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
 
# Git 代理设置
git config --global http.proxy http://proxy.company.com:8080
git config --global https.proxy http://proxy.company.com:8080

防火墙配置

确保以下端口在防火墙中开放：

3000: Shopify CLI 默认开发服务器端口
80/443: HTTP/HTTPS 访问
22: Git SSH 访问

开发目录结构

建议创建统一的开发目录结构：


~/shopify-development/
├── themes/           # 主题项目
├── apps/            # 应用开发项目  
├── tools/           # 开发工具和脚本
├── templates/       # 项目模板
└── learning/        # 学习练习项目


# 创建开发目录
mkdir -p ~/shopify-development/{themes,apps,tools,templates,learning}
cd ~/shopify-development

性能优化配置

加速 npm 安装


# 使用淘宝镜像 (中国用户)
npm config set registry https://registry.npmmirror.com
 
# 或使用 yarn (替代 npm)
npm install -g yarn
yarn config set registry https://registry.npmmirror.com

Git 性能优化


# 配置 Git 用户信息
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
 
# 启用 Git 缓存
git config --global credential.helper cache

故障排除

常见问题解决

Node.js 版本问题


# 使用 nvm 管理 Node.js 版本
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
 
# 安装并使用 LTS 版本
nvm install --lts
nvm use --lts

权限问题 (Linux/macOS)


# 修复 npm 权限问题
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

网络连接问题


# 测试网络连接
ping shopify.com
curl -I https://shopify.dev
 
# DNS 问题解决
# 修改 DNS 服务器为 8.8.8.8 或 1.1.1.1

下一步

环境搭建完成后，建议继续学习：

总结

完整的开发环境包括：

✅ Node.js 和 npm
✅ Git 版本控制
✅ 代码编辑器和扩展
✅ 浏览器开发工具
✅ 必要的开发工具

有了这些基础工具，您就可以开始 Shopify Liquid 开发之旅了！