Chrome扩展构建依赖镜像文档

镜像概述

本镜像旨在为Chrome扩展开发提供标准化的构建依赖环境，解决因开发环境差异导致的构建不一致问题。通过预集成扩展开发所需的核心工具链和依赖库，确保开发者在本地开发、CI/CD流程或多团队协作中使用统一的构建环境，提升开发效率和构建可靠性。

核心功能与特性

• 完整工具链集成：包含Node.js（LTS版本）、npm/yarn包管理器，支持扩展项目依赖管理
• 构建工具支持：预安装webpack、rollup等主流前端打包工具，满足不同扩展项目的构建需求
• 开发辅助工具：集成ESLint代码检查工具、Chrome浏览器（用于扩展调试与测试）
• 版本兼容性：支持指定Node.js版本（通过标签选择），适配不同扩展项目的依赖版本要求
• 轻量级设计：基于Alpine或Debian slim基础镜像，平衡功能完整性与镜像体积

使用场景与适用范围

• 本地扩展开发：开发者可直接使用容器环境进行扩展代码编写、调试和打包，避免本地环境配置冲突
• CI/CD流程集成：作为持续集成/部署流程的构建环境，确保每次构建使用一致的依赖版本
• 多团队协作：统一团队开发环境，减少因依赖版本差异导致的协作问题
• 扩展模板项目：配合扩展脚手架工具，快速初始化标准化的扩展开发项目

使用方法与配置说明

基础使用（Docker Run）

bash
# 拉取镜像（默认latest标签，可指定版本如:18-node18）
docker pull [镜像仓库地址]/chrome-extension-build-deps:latest

# 运行容器并挂载本地扩展项目目录
docker run -it --rm \
  -v /本地扩展项目路径:/app \
  -w /app \
  [镜像仓库地址]/chrome-extension-build-deps:latest \
  sh -c "npm install && npm run build"

关键配置说明

环境变量

容器运行参数

• -v /本地项目路径:/app：挂载本地扩展项目目录至容器内/app工作目录
• -w /app：设置工作目录为/app，确保命令在项目根目录执行
• --rm：构建完成后自动删除容器，节省资源
• -it：交互式运行，支持手动执行命令（如调试时）

典型工作流示例

1. 本地开发构建

bash
# 启动容器并进入交互式终端
docker run -it --rm -v $(pwd):/app -w /app [镜像仓库地址]/chrome-extension-build-deps:latest sh

# 在容器内执行开发命令
npm install       # 安装项目依赖
npm run dev       # 启动开发服务器（如使用webpack-dev-server）
npm run build     # 执行生产环境打包

2. CI/CD集成（Jenkins/GitHub Actions示例）

yaml
# GitHub Actions工作流片段
jobs:
  build-extension:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run build in docker
        run: |
          docker run --rm -v $(pwd):/app -w /app [镜像仓库地址]/chrome-extension-build-deps:latest sh -c "npm install && npm run build"
      - name: Upload build artifact
        uses: actions/upload-artifact@v3
        with:
          name: extension-build
          path: dist/

注意事项

• 版本选择：通过镜像标签（如:18-node18）指定Node.js版本，避免依赖兼容性问题
• 数据持久化：依赖安装结果（node_modules）可通过挂载 volumes 持久化，加速重复构建
• 权限问题：容器内默认使用非root用户，挂载目录需确保权限正确（可通过-u $(id -u):$(id -g)指定用户ID）
• Chrome测试：容器内Chrome默认以无头模式运行，如需可视化调试可配置--no-sandbox参数

常见问题

• Q：如何指定yarn作为包管理器？
  A：运行容器时设置环境变量PACKAGER=yarn，如：docker run -e PACKAGER=yarn ...

• Q：构建速度慢如何优化？
  A：挂载node_modules目录为volume，避免重复安装依赖：-v $(pwd)/node_modules:/app/node_modules