PrimeNG：修改后如何'pack'或'build'项目？

Question

我在 angular 应用程序中使用 primeng。我想向其中一个组件添加一些功能，因此我按照说明 (https://github.com/primefaces/primeng/wiki/Building-From-Source) 进行操作并使我的所有更改生效。现在我想把它打包，这样我就可以在我的应用程序中安装这个修改过的分支。我该怎么做？

我之前通过运行 'npm pack' 使用 ng2-bootstrap 完成过此操作，然后在我的应用程序中安装生成的 tar 包。我尝试用 primeng 做同样的事情，但我的项目出错了，因为 primeng.js 文件不存在。我假设我需要以不同的方式来做，但我不知道如何做，而且我没有太多 webpack/gulp 经验。

Answer 1

分支到您的 GitHub 帐户
克隆包
创建一个新分支
对新分支进行更改

然后运行依次执行以下命令；

npm install - 下载依赖项

gulp build - 为 css

创建资源包

npm run build-prod - 运行构建脚本。

然后您可以将此包推送到您自己的 GitHub 帐户，并使用不同的分支名称和运行您需要自定义构建的项目中的以下内容：

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

然后，每当 priming 对 master 进行更改时，您都可以将它们与您的自定义分支合并。

Answer 2

在分叉的 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

Answer 3

primeNG > 7

可选择在 package.json 中添加 dist 脚本以构建分发文件

{
  "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] Starting 'themes'... events.js:174 throw er; // Unhandled 'error' event ^ Error: ENOENT: no such file or directory, stat 'primeng/resources/components/accordion/accordion.css'

另一个

[08:35:44] 'images' errored after 134 ms [08:35:44] Error: EEXIST: file already exists, 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 docs 声明你也可以使用一个文件夹，所以，你也可以安装为

npm install ~/primeng/

我试过了，但它在我的项目中引发了以下异常，所以我不得不使用 tar.gz

StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!

你也可以在 npm 上发布你自己的版本

npm login
npm publish

并使用它代替 primeng 官方发行版

npm install @youruser/primeng

感谢@Anulal 为我们指明了正确的方向

Answer 4

primeng >= 9 构建过程已更改为在 primeng 9 中使用 ng-packagr。此方法在 primeng 10 中得到确认。

构建运行一次安装ng-packager:

npm install ng-packager --save-dev

运行每次构建

npm run build-lib

我还没有使用 ng-packagr 构建版本 9。按照这个应该是一样的link.

PrimeNG：修改后如何'pack'或'build'项目？

PrimeNG: how to 'pack' or 'build' the project after making changes?

angular

primeng

ng2-bootstrap

primeNG > 7