pcic/climate-explorer-frontend

PCIC Climate Explorer 前端镜像

概述与主要用途

PCIC Climate Explorer 前端镜像是PCIC Climate Explorer的前端界面实现，基于Node.js、React.js、Webpack、Babel等现代前端技术栈（ES6+）构建。该镜像提供气候数据的可视化与探索界面，通过配置环境变量可连接后端气候数据服务、地图瓦片服务等，支持开发和生产环境部署。

核心功能与特性

• 技术栈：基于Node.js、React.js、Webpack、Babel，支持ES6+语法
• 环境配置：通过环境变量灵活配置后端服务URL、地图瓦片服务等关键参数
• 开发工具：集成webpack-dev-server，支持热模块替换（HMR），提升开发效率
• 质量保障：配置ESLint（遵循AirBnb预设）进行代码检查，支持单元测试（npm test）
• 容器化部署：提供完整Docker构建与运行流程，支持生产环境快速部署

使用场景与适用范围

• 气候数据可视化：为研究人员和用户提供直观的气候数据探索界面
• 开发环境：支持前端开发者进行功能开发与调试，通过热模块替换实时预览变更
• 生产环境：可部署至服务器，作为PCIC Climate Explorer工具链的前端组件，连接后端数据服务

使用方法与配置说明

环境变量配置

前端配置通过环境变量实现，关键变量如下：

Docker部署

构建Docker镜像

1. 克隆代码仓库：

   bash
   git clone https://github.com/pacificclimate/climate-explorer-frontend
   cd climate-explorer-frontend
   

2. 构建镜像：

   bash
   docker build -t pcic/climate-explorer-frontend-image .
   

运行Docker镜像

运行时需设置以下环境变量（生产环境必须配置）：

bash
docker run --restart=unless-stopped -d \
  -p <外部端口>:8080 \
  -e NODE_ENV=production \
  -e CE_BACKEND_URL=https://services.pacificclimate.org/marmot/api \
  -e CE_ENSEMBLE_NAME=ce \
  -e NCWMS_URL=https://services.pacificclimate.org/marmot/ncwms \
  -e TILECACHE_URL=https://tiles.pacificclimate.org/tilecache/tilecache.py \
  -e CE_BASE_PATH=/marmot/app \
  --name climate-explorer-frontend \
  pcic/climate-explorer-frontend:latest

说明：NODE_ENV设为"production"启用生产模式；CE_BACKEND_URL为后端API基础URL；CE_BASE_PATH需与代理服务器配置的路径一致。

开发环境设置

依赖安装与启动

bash
# 安装依赖
npm install

# 启动开发服务器（带热模块替换）
npm start

测试

bash
# 运行单元测试
npm test

代码检查（Linting）

使用ESLint（基于AirBnb预设）进行代码检查：

bash
# 检查所有文件
npm run lint

# 检查指定文件或匹配模式
npm run lint:glob <文件名或glob模式>

可通过git/hooks/pre-commit-eslint钩子在提交前检查 staged 的.js文件（仅阻止错误，警告允许），安装至.git/hooks目录即可启用。如需跳过检查，可使用git commit --no-verify（不推荐）。

版本发布

版本发布步骤：

1. 更新package.json中的version字段
2. 在NEWS.md中总结自上次版本的变更
3. 提交变更并打标签：

   bash
   git add package.json NEWS.md
   git commit -m"Bump to version x.x.x"
   git tag -a -m"x.x.x" x.x.x
   git push --follow-tags
   

代码风格规范

代码风格遵循ESLint配置，主要基于AirBnb预设。常见需注意的规则（按违规频率排序）：

1. 行长度限制为80字符
2. 字符串使用单引号（双引号视觉干扰更大）
3. 注释开始分隔符后需加空格（// 注释...而非//comment...）
4. if和for与左括号间需加空格（if (cond)而非if(cond)）
5. 使用const或let声明变量（优先const），避免var（const和let具有块级作用域）
   • 遍历对象使用for (const prop in obj)，遍历可迭代对象使用for (const val of iterable)，计数循环使用for (let i = 1; i < n; i++)