ADO Pipeline публикует пакет npm в локальных артефактах

Я изо всех сил пытался правильно опубликовать свой пакет npm в моем локальном репозитории артефактов ADO, используя конвейеры ADO и файл YAML. Все выглядело хорошо, пока я не попытался использовать пакет в другом проекте и не обнаружил, что вместе с папкой package.json был опубликован только файл node_modules, а не код, сгенерированный npm build.

Кроме того, код, создаваемый для пакета, является частью всего проекта Storybook. На данный момент это всего лишь некоторый код тем, а остальные компоненты будут обработаны позже.

Вот мой YAML-файл:

trigger:
  branches:
    include:
      - master
  paths:
    include:
      - src/themes
  tags:
    include:
      - patch
    exclude:
      - major
      - minor

resources:
  - repo: self

stages:
  - stage: Publish
    displayName: Publish Theme Package
    jobs:
      - job: Publish
        displayName: Publish to ADO Artifact feed
        pool:
          vmImage: "ubuntu-latest"
        steps:
          - checkout: self
            persistCredentials: true
            clean: true
          - task: npmAuthenticate@0
            inputs:
              workingFile: .npmrc
          - task: NodeTool@0
            displayName: "update node.js to latest version"
            inputs:
              versionSource: "spec"
              versionSpec: "20.x"
              checkLatest: true
          - task: Npm@1
            displayName: "Update npm to latest version"
            inputs:
              command: "custom"
              customCommand: "install -g npm@latest"
          - task: Npm@1
            displayName: npm install
            inputs:
              command: install
          - task: Npm@1
            displayName: npm run build
            inputs:
              command: "custom"
              customCommand: "run build"

          # - task: CopyFiles@2
          #   inputs:
          #     SourceFolder: '/src/themes'
          #     Contents: |
          #       /src/themes/*
          #     TargetFolder: '/src/dist'
          #   displayName: 'Copy theme files'
          
          # - task: PublishPipelineArtifact@1
          #   inputs:
          #     targetPath: '$(Build.ArtifactsStagingDirectory)'
          #     artifact: 'wec-themes'
          #     publishLocation: 'pipeline'
          #   displayName: 'Publish npm artifact'
    
          - bash: | # Grab the package version
               v=`node -p "const p = require('./package.json'); p.version;"`
               echo "##vso[task.setvariable variable=packageVersion]$v"
          - task: CmdLine@2 # Push changes to GitHub (substitute your repo)   
            inputs:
              script: |
                git config --global user.email "[email protected]"
                git config --global user.name "Azure Pipeline"
                git add package.json
                git commit -a -m "Automated Commit from Azure DevOps"
                git push -u origin HEAD:master
          - task: Npm@1
            displayName: npm version patch
            inputs:
              command: "custom"
              customCommand: "version patch -force"
          - task: Npm@1
            displayName: npm publish
            inputs:
              command: publish
              publishRegistry: useFeed
              publishFeed: removed
              workingDir: "/dist/"
              verbose: true


Я закомментировал некоторые команды копирования только потому, что пытался заставить их работать.

Журналы сборки NPM из последнего запуска:

cropped the first 30 lines
> [email protected] build
> tsc && vite build

vite v5.2.12 building for production...
transforming...
✓ 284 modules transformed.
rendering chunks...

[vite:dts] Start generate declaration files...
computing gzip size...
dist/base-theme.js            0.08 kB │ gzip:  0.09 kB
dist/index.js                 0.23 kB │ gzip:  0.14 kB
dist/light/light-theme.js     5.71 kB │ gzip:  1.43 kB
dist/dark/dark-theme.js       8.31 kB │ gzip:  1.57 kB
dist/base-theme-DYM8UH8-.js  95.62 kB │ gzip: 23.51 kB
[vite:dts] Declaration files built in 4305ms.

✓ built in 5.57s

Finishing: npm run build

{
  "name": "design-portal",
  "private": true,
  "version": "1.1.2",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
 ...

Я все еще получаю сообщение об ошибке при публикации. Смотрите журнал ниже

Starting: npm publish
==============================================================================
Task         : npm
Description  : Install and publish npm packages, or run an npm command. Supports npmjs.com and authenticated registries like Azure Artifacts.
Version      : 1.242.1
Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/package/npm
==============================================================================
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
/opt/hostedtoolcache/node/20.15.1/x64/bin/npm --version
10.8.2
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
##[warning]Can't find loc string for key: Info_GotAndMaskAuth
##[error]Error: ENOENT: no such file or directory, stat '/dist/*'
Finishing: npm publish

Добавляем дополнительные детали вокруг @latest

Какие файлы пакета вы ожидаете? Можете ли вы подтвердить, что сборка NPM сгенерировала ожидаемые файлы, и проверить, существуют ли эти файлы в папке dist?

Kevin Lu-MSFT 23.07.2024 15:56

@KevinLu-MSFT Я могу подтвердить, что файлы были созданы сборкой npm. Логи выложу.

Rob M 23.07.2024 16:08

Пожалуйста, обратитесь к моему ответу и добавьте поле files в свой файл package.json. Затем вы можете настроить включенные файлы в пакете npm. В то же время вам также необходимо проверить, существуют ли игнорируемые файлы в вашем репозитории. Вам необходимо убедиться, что папка dist не исключена из файла игнорирования.

Kevin Lu-MSFT 23.07.2024 16:34

@KevinLu-MSFT У меня уже была папка dist в моем файле package.json. Я опубликую это. Я добавил файл .npmignore в репозиторий и удалил из него папку dist, которая была скопирована из файла .gitignore, в котором он был.

Rob M 23.07.2024 17:22

Вы имеете в виду, что после добавления поля файлов отображается ошибка «файл не найден»?

Kevin Lu-MSFT 23.07.2024 17:51

Это происходило до каких-либо изменений. Поле файлов в package.json уже включало папку dist. Мне не пришлось вносить какие-либо изменения, чтобы включить его. Единственное изменение, которое я сделал, это добавил .npmignore

Rob M 23.07.2024 17:59

Пожалуйста, обратитесь к обновлению в моем ответе. Вам нужно изменить workingDir в задаче публикации npm. Вам необходимо указать путь к папке, в которой находится файл package.json. Затем он найдет правильный файл package.json для использования. См. этот документ о настройках задач npm: Learn.microsoft.com/en-us/azure/devops/pipelines/tasks/…

Kevin Lu-MSFT 23.07.2024 18:04
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
7
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я проверил журнал конвейера и подтвердил, что файлы существуют в папке dist.

Чтобы включить папку dist в пакет npm, вы можете добавить файл files в файл package.json и установить папку dist.

Например:

Пакет.json

{
  "name": "angular-realworld",
  "version": "0.0.0",  
   .....
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",

  },
  "engines": {
    "node": "^18.13.0 || ^20.9.0"
  },
  "files": [
    "dist/",
    "src/"
  ],
 
  "dependencies": {
...
}

Примечание. Нам нужно установить путь к папке dist на основе фактического пути.

Обратитесь к документу: файлы в package.json

Поле «Файлы» представляет собой массив файлов, которые можно включить в ваш проект. Если вы назовете папку в массиве, он также будет включать файлы внутри этой папки. (Если только они не будут проигнорированы другим правилом.)

С другой стороны, вы можете проверить, существуют ли файлы .gitignore или .npmignore в вашем репозитории. Если да, вы можете проверить, исключена ли папка dist из файла игнорирования.

Если при публикации npm у вас нет файла .npmignore, npm будет использовать ваш файл .gitignore.

Вы можете создать файл .npmignore на основе вашего файла .gitignore, не игнорируя папку dist. Обратитесь к этому документу: Хранение файлов в пакете

Вот мой результат:

Обновлять:

##[ошибка]Ошибка: ENOENT: нет такого файла или каталога, stat '/dist/*'

Что касается последней ошибки в вопросе, причина проблемы заключается в том, что вам необходимо определить путь к папке файла package.json в задаче npm вместо папки dist.

Например:

      - task: Npm@1
        displayName: npm publish
        inputs:
          command: publish
          publishRegistry: useFeed
          publishFeed: removed
          workingDir: "folder path where package.json located"
          verbose: true

Итак, после перехода в рабочий каталог задачи публикации все работало нормально, но я получил новое сообщение об ошибке: npm error code EINVALIDTAGNAME npm error Invalid tag name "@latest" of package "@latest": Tags may not have any characters that encodeURIComponent encodes. Я не помечаю пакет явно.

Rob M 23.07.2024 20:40

@RobM Судя по коду package.json и YAML, я действительно не вижу никаких тегов, связанных с @latest. Можете ли вы поделиться более подробной информацией о журнале конвейера ошибок? Вы получаете сообщение об ошибке при публикации или установке пакета?

Kevin Lu-MSFT 24.07.2024 08:27

Это было во время задачи публикации конвейера. Добавил скрин ошибки

Rob M 24.07.2024 13:52

@RobM Я проверил скриншот. Это действительно странная ошибка. Но, по крайней мере, мы видим, что папка dist включена в пакет npm. При возникновении новой ошибки вы можете попробовать понизить версию узла и npm и проверить, работает ли она.

Kevin Lu-MSFT 24.07.2024 13:58

Я заметил еще одну проблему: publish missing "name" field was set to an empty string в журнале конвейера. Кажется, что поле имени отсутствует в Package.json. Может попробовать проверить? вы можете обратиться к образцу package.json в моем ответе (например, "name": "angular-realworld",).

Kevin Lu-MSFT 24.07.2024 14:04

А из package.json, которым вы поделились в вопросе, вам нужно удалить поле: "private": true, в package.json при публикации пакета npm.

Kevin Lu-MSFT 24.07.2024 14:17

Я справился со всем этим. Я понижаю версию узла с v20 до v18

Rob M 24.07.2024 14:24

@RobM Нет проблем. Пожалуйста, не стесняйтесь поделиться с нами результатом.

Kevin Lu-MSFT 24.07.2024 14:25

Похоже, это сработало. Я понизил версию node.js до v18 и npm до v8. Проверяем потребительский проект, папку node_modules для пакета и наличие правильных файлов. Тестируем потребительский проект сейчас.

Rob M 24.07.2024 14:43

Рад узнать, что теперь это может работать!!

Kevin Lu-MSFT 24.07.2024 14:44

Я очень ценю помощь.

Rob M 24.07.2024 14:49

Другие вопросы по теме