PrimeNG: как «упаковать» или «собрать» проект после внесения изменений?

Я использую Primeng в своем угловом приложении. Я хотел добавить некоторую функциональность одному из компонентов, поэтому следовал инструкциям (https://github.com/primefaces/primeng/wiki/Building-From-Source), и все мои изменения заработали. Теперь я хочу упаковать его, чтобы установить эту модифицированную ветку в свое приложение. Как мне это сделать?

Я делал это раньше с помощью ng2-bootstrap, запустив «npm pack», а затем установив сгенерированный пакет tar в свое приложение. Я попытался сделать то же самое с Primeng, но мой проект выдал ошибку, потому что там не было файла Primeng.js. Я предполагаю, что мне нужно сделать это по-другому, но я не знаю, как это сделать, и у меня нет большого опыта работы с webpack/gulp.


person Kevin Quiring    schedule 24.12.2016    source источник


Ответы (4)


  1. Разветвите свою учетную запись GitHub
  2. Клонировать пакет
  3. Сделать новую ветку
  4. Внесите изменения в новую ветку

Затем выполните следующие команды по порядку;

npm install — загружает зависимости

gulp build — создает пакет ресурсов для css.

npm run build-prod — запускает скрипты сборки.

Затем вы можете отправить этот пакет в свою собственную учетную запись GitHub и с другим именем ветки и запустить в своем проекте следующее, для которого требуется пользовательская сборка:

npm install git://github.com/<user>/<project>.git#<branch>

Затем всякий раз, когда прайминг вносит изменения в мастер, вы можете объединить их со своей настраиваемой веткой.

person J J B    schedule 24.12.2016
comment
Я успешно выполнил все эти шаги, но по-прежнему получаю ту же ошибку: Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) localhost:3000/node_modules/primeng/primeng.js. Единственный шаг, который я не сделал, — это разветвление моей учетной записи github, но эти шаги должны работать и локально, да? - person Kevin Quiring; 27.12.2016
comment
Итак, как вы установили npm? Что ваш проект использует для системы сборки? Используете ли вы какой-либо из следующих angular-cli, WebPack, SystemJS? - person J J B; 27.12.2016
comment
Я использую systemjs, аналогично тому, как загружается angular quickstart - person Kevin Quiring; 27.12.2016
comment
В вашей конфигурации systemjs указан правильный путь для импорта? Вы просто копируете папку primeng в свой проект node_modules или выполняете установку npm? - person J J B; 27.12.2016
comment
Я попробовал установить npm для измененной папки ветки Primeng в целом. Итак, в моем проекте я попробовал npm install primeng-branch, а затем ветка Primeng была установлена ​​в мой каталог node_modules. Я также попытался сделать пакет npm внутри ветки Primeng, а затем установить сгенерированный tar-архив в свой проект, но это также привело к той же ошибке. Я не копирую каталог ветки primeng в свой каталог node_modules - person Kevin Quiring; 27.12.2016
comment
Файла primeng.js там нет, если это поможет. Итак, после установки модифицированной ветки файла primeng.js нет. Похоже, я скопировал каталог в node_modules, но я этого не сделал. - person Kevin Quiring; 28.12.2016
comment
Вашу модифицированную ветку можно разместить на GitHub? Затем я могу напрямую проверить это, чтобы увидеть, смогу ли я обнаружить проблему. - person J J B; 28.12.2016
comment
Да, вот он: github.com/quiringk/PrimeNGModifiedBranch. Я не думаю, что что-то изменилось, а если и изменилось, то очень незначительное изменение. Так что он должен быть довольно близок к мастеру, когда я его клонировал. - person Kevin Quiring; 28.12.2016
comment
Это не связано с .gitignore, не так ли? Так как этот файл находится там. Только что клонировал его в свою систему. - person J J B; 30.12.2016
comment
Заглянув в пакет еще немного, я вижу, что npm build-prod запускает webpack и создает пакет webpack. Это не совсем то, что вам нужно. Так что на самом деле вам нужно запустить gulp build & tsc .js будет в корневой папке, а другие активы будут в ресурсах. - person J J B; 30.12.2016
comment
Я попытался запустить эту команду и получил те же результаты, что и при установке каталога primeNg в своем проекте. Нужно ли мне использовать webpack вместо systemjs, чтобы внести эти изменения? - person Kevin Quiring; 07.01.2017
comment
npm run build в этом примере не работает, потому что угловые зависимости не соблюдаются. Однако я не хочу, чтобы они были в сборке tgz prod. Как мне создать .tgz, как тот, который предоставит npm install primeng? (без витрины и угловых требований) Все мои попытки приближались, но в итоге заканчивались печалью. Удаление витрины и, следовательно, угловых требований — это только первый шаг, который появляется. - person Wes Grant; 02.05.2017

В разветвленной версии PrimeNG v5 файл package.json необходимо обновить следующими строками для сборки и распространения.

дополнения к package.json

  "scripts": {
    "build-components": "ngc -p tsconfig-release.json",
    "build-assets": "gulp build-assets",
    "build-styles": "node-sass src/assets/components -o src/assets/components",
    "build-redistribute": "npm run build-components && npm run build-assets && npm run build-styles"
  }
  "devDependencies": {
    "node-sass": "^4.5.3",
  }

установите node-sass и выполните следующую команду для сборки

npm run build-redistribute

Ссылка: https://forum.primefaces.org/viewtopic.php?p=159783#p159783

person Anulal S    schedule 02.11.2017
comment
Больше не работает для PrimeNG 7, по крайней мере, для меня. - person Daniel Gray; 19.12.2018

праймNG > 7

При желании добавьте скрипт dist в package.json для сборки файлов дистрибутива.

{
  "name": "primeng",
  "version": "7.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dist": "ngc -p tsconfig-release.json && gulp build-assets && gulp build-exports"
  },

а затем просто сделать

npm run dist

обратите внимание, что в версии 7.0.0 при выполнении этой команды у меня возникали случайные ошибки

[08:38:19] Запуск "тем"... events.js:174 throw er; // Необработанное событие «ошибка» ^ Ошибка: ENOENT: нет такого файла или каталога, stat 'primeng/resources/components/accordion/accordion.css'

Другой

[08:35:44] 'images' с ошибкой через 134 мс [08:35:44] Ошибка: EEXIST: файл уже существует, mkdir 'primeng/resources/images'

Я полагаю, это было связано с гонками или чем-то еще. Если это произойдет, просто повторите команду, пока она не сформируется правильно.

вы также можете запускать команды без добавления скрипта

npm install
./node_modules/.bin/ngc -p tsconfig-release.json
./node_modules/.bin/gulp build-assets
./node_modules/.bin/gulp build-exports

затем вы можете создать файл tar.gz, который вы можете использовать в своем проекте.

npm pack

и установите в свой проект с помощью

npm install ~/primeng/primeng-7.0.0.tar.gz

npm install документы утверждают, что вы также можете использовать папку, поэтому вы также можете установить как

npm install ~/primeng/

Я попробовал, но в моем проекте возникло следующее исключение, поэтому мне пришлось использовать tar.gz

StaticInjectorError (платформа: ядро) [RouterOutlet -> ChildrenOutletContexts]: NullInjectorError: нет провайдера для ChildrenOutletContexts!

Вы также можете опубликовать свою версию на npm.

npm login
npm publish

и использовать его вместо официального дистрибутива Primeng

npm install @youruser/primeng

спасибо @Anulal за то, что указал нам правильное направление

person cirovladimir    schedule 05.07.2019
comment
Запуск всех связанных команд решает проблему гонки ./node_modules/.bin/ngc -p tsconfig-release.json && ./node_modules/.bin/gulp build-assets && ./node_modules/.bin/gulp build-exports && npm pack - person Yoraco Gonzales; 17.11.2020

primeng ›= 9 Процесс сборки изменился, чтобы использовать ng-packagr в Primeng 9. Этот метод был подтвержден в Primeng 10.

Для сборки запустите один раз, чтобы установить ng-packager:

npm install ng-packager --save-dev

Бегите строить каждый раз

npm run build-lib

Я не собирал версию 9, используя ng-packagr. Согласно этой ссылке, должно быть таким же.

person ShaneCoder    schedule 10.09.2020