openlmis/dev-ui

OpenLMIS-UI Docker化开发镜像

镜像概述和主要用途

该镜像包含OpenLMIS-UI生成所需的工具和核心包，基于debian-jesse构建。OpenLMIS-UI是一个通过NPM流程构建的单页应用，本镜像提供了完整的开发环境，支持应用构建、测试及开发服务器运行，适用于OpenLMIS-UI的模块化开发与构建流程。

核心功能和特性

• 基础环境：基于debian-jesse，集成Node 6.2、NPM、Bower、AngularJS 1.6.x等工具链
• 数据卷暴露：
  • /dev-ui：构建工具源码目录，开发构建工具时需显式挂载
  • /app：应用主目录，存放NPM配置文件(config.json)，所有构建产物和依赖文件将在此生成
• 端口暴露：
  • 9000：开发服务器HTTP端口
  • 9876：Karma测试运行器调试端口
• 模块化支持：通过配置文件指定多目录加载顺序，支持多仓库代码拼接构建
• 动态配置：支持通过配置文件或命令行标志替换应用内动态变量
• 代理功能：开发服务器可自动替换URL为代理地址，解决跨域(CORS)问题

使用场景和适用范围

• 开发OpenLMIS-UI构建工具（Dev-UI）
• 使用Dev-UI开发OpenLMIS应用模块
• 构建和测试OpenLMIS-UI单页应用
• 多模块组合构建与调试

使用方法和配置说明

开发Dev-UI

如需基于本地文件系统更新运行Dev-UI镜像，执行以下步骤：

bash
# 从本地仓库构建镜像（可选）
docker build -t openlmis/dev-ui .

# <dev-ui>：本地Dev-UI文件路径，建议使用$(pwd)
# <app-dir>：应用文件路径（可选）
# 注意：此命令未包含端口映射
docker run -it --rm -v <dev-ui>:/dev-ui -v <app-dir>:/app openlmis/dev-ui

# 进入容器后，安装Dev-UI包到应用目录
cd /app
npm install

如需实时查看构建流程变更（无需重复执行npm install），使用npm link命令：

bash
# 进入应用目录
cd /app

# 清理并重新安装依赖
rm -rf node_modules
npm install

# 创建软链接，实时反映/dev-ui目录变更
npm link /dev-ui

# 编辑Grunt任务后，运行时将自动应用变更

使用Dev-UI开发应用

大多数交互通过docker-compose完成（详见其他仓库文档），以下为原生Docker使用方法。

基本运行命令：

bash
docker run -it --rm -v $(pwd):/app openlmis/dev-ui

典型开发流程：

bash
# 映射9000端口，启动开发服务器
docker run -it --rm -p 9000:9000 -v $(pwd):/app openlmis/dev-ui

# 进入应用目录
cd /app

# 安装依赖
npm install

# 构建并启动开发服务器
grunt build --serve

构建与测试

目录结构

OpenLMIS-UI通过多仓库构建，需在config.json中配置目录加载顺序（后加载目录会覆盖先加载目录的资源）。所有路径应为绝对路径。

示例config.json：

json
"orderedBuildDirectories": [
    "/openlmis-ui-base",
    "/openlmis-ui-styles",
    "/openlmis-requisition-ui",
    "/openlmis-orders-ui",
    "/openlmis-reference-ui"
]

注意：

• /dev-ui目录默认优先加载（除非在config.json中显式指定）
• 当前目录（通常为/app）默认最后加载（除非已在config.json中指定）

常用Grunt命令

以下命令基于dev-ui/tasks中定义的基础任务，可在自定义Gruntfile中复用、覆盖或重组：

• grunt：依次执行bower、build、karma:unit
• grunt build：构建OpenLMIS-UI
• grunt watch：监听文件变更并自动重建
• grunt serve：启动开发服务器，提供./build/目录访问
• grunt clean：清空构建目录和临时文件
• grunt bower：遍历所有应用构建目录，安装各目录bower.json定义的依赖
• grunt karma:unit：运行Jasmine单元测试
• grunt karma:tdd：TDD模式运行单元测试（文件变更时自动重跑）

命令标志

通过命令行标志可覆盖基础配置：

• --production：启用生产模式，压缩混淆文件
• --noDocs：禁用JS文档生成（运行grunt build时）
• --noStyleguide：禁用KSS样式指南生成（运行grunt build时）
• --serve：与其他命令一起运行开发服务器（保持进程活跃），并自动将HTTP开头的URL替换为带CORS头的代理URL
• --syncTransifex：扩展grunt messages命令，同步各应用的messages_en.json至Transifex，需满足：
  • 应用目录config.json中定义transifexProjectName
  • 通过环境变量（TRANSIFEX_USER、TRANSIFEX_PASSWORD）或命令行标志（--transifexUser=、--transifexPassword=）提供Transifex凭据

代理URL

开发时与OpenLMIS服务器或服务交互需处理跨域问题，开发服务器会自动创建本地代理URL并替换外部URL，添加CORS头。

动态配置变量

应用中以@@为前缀的字符串会被自动替换为匹配的配置项。变量名使用CONSTANT_CASE，配置项使用camelCase。

示例：

json
// config.json中添加
{
    "openlmisServerUrl": "http://somewhere.over.the/rainbow/"
}

// 或构建命令中添加标志
grunt build --openlmisServerUrl=http://somewhere.over.the/rainbow

技术栈

• Node 6.2
• NPM
• Bower
• AngularJS 1.6.x