以下是使用Jenkins Pipeline流水线方式编译前端项目的详细操作指南：

一、环境准备

安装必要插件：

在Jenkins管理界面安装：
- NodeJS Plugin（用于管理Node.js环境）
- Pipeline（核心插件）
- Git Plugin（代码拉取）

配置Node.js环境：

进入 Manage Jenkins → Global Tool Configuration
添加Node.js安装路径或选择自动安装指定版本（如16.x）

二、创建Pipeline项目

新建任务：

点击 New Item → 选择 Pipeline → 输入任务名称（如frontend-build）

配置流水线源：

方式1：直接编写脚本
在Pipeline脚本框中直接输入Groovy脚本（见下文示例）。
方式2：从代码库拉取
选择 Pipeline script from SCM，指定Git仓库地址和Jenkinsfile路径。

三、编写Jenkinsfile示例

pipeline {
    agent any
    tools {
        nodejs "NodeJS_16" // 与Global Tool Configuration中定义的名称一致
    }
    environment {
        PROJECT_DIR = 'frontend' // 项目子目录（可选）
        NPM_CONFIG_CACHE = '/tmp/.npm' // 指定缓存路径
    }
    stages {
        // 阶段1：拉取代码
        stage('Checkout') {
            steps {
                git branch: 'main', 
                url: 'https://github.com/your-repo/frontend-project.git'
            }
        }

        // 阶段2：安装依赖
        stage('Install') {
            steps {
                dir(env.PROJECT_DIR) {
                    sh 'npm install --prefer-offline' // 优先使用本地缓存
                }
            }
        }

        // 阶段3：代码检查（可选）
        stage('Lint') {
            steps {
                dir(env.PROJECT_DIR) {
                    sh 'npm run lint' 
                }
            }
        }

        // 阶段4：编译构建
        stage('Build') {
            steps {
                dir(env.PROJECT_DIR) {
                    sh 'npm run build' 
                    archiveArtifacts artifacts: 'dist/**' // 归档构建产物
                }
            }
        }

        // 阶段5：部署（可选）
        stage('Deploy') {
            when {
                branch 'main' // 仅main分支触发部署
            }
            steps {
                sh 'scp -r dist/* user@server:/path/to/deploy'
            }
        }
    }
    post {
        always {
            cleanWs() // 清理工作空间
        }
        success {
            emailext body: '前端构建成功！', 
                    subject: 'Jenkins通知: ${JOB_NAME}构建结果',
                    to: 'team@example.com'
        }
        failure {
            emailext body: '前端构建失败，请检查日志：${BUILD_URL}', 
                    subject: 'Jenkins告警: ${JOB_NAME}构建失败',
                    to: 'devops@example.com'
        }
    }
}

四、关键配置说明

Agent选择：

使用 agent any 随机选择节点，或指定标签（如 agent { label 'frontend-builders' }）

依赖缓存优化：

通过 NPM_CONFIG_CACHE 指定缓存路径，避免重复下载
使用 --prefer-offline 参数优先使用本地缓存

构建产物处理：

archiveArtifacts 保存编译后的dist目录
如需上传到OSS/Nexus，可添加sh 'curl -X PUT ...'命令

通知机制：

通过 post 阶段发送构建结果邮件（需配置Jenkins邮件服务）

五、高级技巧

并行构建：

   stage('Test') {
       parallel {
           stage('Unit Test') { steps { sh 'npm test' } }
           stage('E2E Test') { steps { sh 'npm run e2e' } }
       }
   }

参数化构建：

   parameters {
       choice(name: 'ENV', choices: ['dev', 'prod'], description: '选择环境')
   }
   stages {
       stage('Build') {
           steps {
               sh "npm run build:${params.ENV}"
           }
       }
   }

Docker集成：

   stage('Build with Docker') {
       steps {
           script {
               docker.image('node:16').inside {
                   sh 'npm install && npm run build'
               }
           }
       }
   }