웹 확장 개발

  • 아티클

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

확장을 사용하여 새 웹 환경, 대시보드 위젯, 빌드 작업 등으로 Azure DevOps를 향상시킵니다. HTML, JavaScript 및 CSS와 같은 표준 기술을 사용하여 확장을 개발할 수 있습니다. 이 자습서에서는 Azure DevOps용 웹 확장을 만드는 방법에 대해 설명합니다.

팁

Azure DevOps 확장 SDK를 사용하여 확장 개발에 대한 확장 샘플 및 최신 설명서를 살펴봅니다.

필수 조건

다음 권한 및 설치가 있어야 합니다.

디렉터리 및 매니페스트 만들기

확장은 필수 매니페스트 파일을 포함하는 파일 집합으로 구성됩니다. .vsix 파일로 패키지하고 Visual Studio Marketplace에 게시합니다.

  1. 확장에 필요한 파일을 저장할 디렉터리를 만듭니다.

    mkdir my-first-extension

  2. 이 디렉터리에서 새 npm 패키지 매니페스트를 초기화합니다.

    npm init -y

    이 파일은 확장에 필요한 라이브러리를 설명합니다.

  3. Microsoft VSS 웹 확장 SDK 패키지를 설치하고 npm 패키지 매니페스트에 저장합니다.

    npm install azure-devops-extension-sdk --save

    이 SDK에는 확장이 포함된 페이지와 통신하는 데 필요한 API를 제공하는 JavaScript 라이브러리가 포함되어 있습니다.

  4. 다음 콘텐츠를 사용하여 확장 디렉터리의 루트에 명명된 vss-extension.json 확장 매니페스트 파일을 만듭니다.

    {
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

    참고 항목

    이 속성은 public Visual Studio Marketplace의 모든 사용자에게 확장이 표시되는지 여부를 제어합니다. 개발 중에 확장을 비공개로 유지합니다.

  5. 웹 환경에 기여한 보기(허브라고도 함)에 대한 다음 콘텐츠를 사용하여 확장 디렉터리의 루트에 이름이 지정된 my-hub.html 파일을 만듭니다.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        window.requirejs.config({
            enforceDefine: true,
            paths: {
                'SDK': './lib/SDK.min'
            }
        });
        window.requirejs(['SDK'], function (SDK) {
            if (typeof SDK !== 'undefined') {
                console.log("SDK is defined. Trying to initialize...");
                SDK.init();
                SDK.ready().then(() => {
                    console.log("SDK is ready");
                    document.getElementById("name").innerText = SDK.getUser().displayName;
                });
            } else {
                console.log('SDK is not defined');
            }
        });
    </script>
    <style>
        body {
            background-color: rgb(0, 67, 117);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

  6. 확장 디렉터리가 다음 예제와 같이 표시됩니다.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
도움이 필요하신가요? Azure DevOps Services 개발자 커뮤니티에 질문을 게시합니다.

다음 단계

확장 패키지 및 게시