开发环境搭建

在开始 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
Cursor: AI 编辑器，智能代码提示，跟VS Code 差不多，不过需要更好的体验，可以尝试订阅服务

浏览器

Chrome DevTools

Chrome 是 Shopify 开发的首选浏览器，基本必不可少。

开发环境验证

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


# 创建测试目录
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

开发目录结构

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


~/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

下一步

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