javascript - 在处理依赖它的项目时构建 Angular 4 库

Question

我目前正在从事一个 Angular 4 项目，该项目涉及开发外部 UI 组件库(很像“ngx-bootstrap”)。

将两者分开非常重要，因为上述 UI 组件库稍后将在其他 Angular 4 项目中使用。

我注意到大多数库都是预先构建的， 然而，单独构建它们(至少现在)太麻烦了，我宁愿同时处理它们，我的第一个想法是简单地导入 .ts 文件并编译它们来自父项目。

我尝试使用npm link来实现这个功能，但是在网上阅读时，似乎不推荐这种方法。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/linked-library.md

我很想知道我有哪些选择可以实现此功能。

另一件重要的事情是在外部也可以使用源代码，因为该库将被开发并用于其他项目。

Answer 1

您可以使用 ng-packagr轻松构建库。

关注这篇文章。 https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

你会有一些想法。我想这会适合你。只需创建您想要用作库的组件并将其导出。

1. 安装angualr/cli npm install @angular/cli -g
2. 创建组件ng new my-component-library
3. 创建一个模块 ng generate module modules/header [将作为库的模块]
4. 创建组件ng 生成组件模块/header
5. 导出头部组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent // <-- this!
  ]
})
export class HeaderModule { }

1. 安装 ng-packagr npm install ng-packagr --save-dev
2. 根据 ng-packagr 文档，我们需要将两个文件添加到我们的项目中，ng-package.json 和 public_api.ts。我们将使用 ng-package.json 来配置 n-packagr 并告诉它在哪里可以找到我们的 public_api.ts 文件，我们将用于导出我们组件库的功能模块。 (注意:public_api.ts 是 Angular 组件库使用的约定。)

将以下内容添加到 ng-package.json 中:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

然后从 public_api.ts 中导出您的 header.module.ts:

export * from './src/app/modules/header/header.module'

现在我们将向我们的 package.json 添加一个打包程序脚本，我们可以使用它告诉 ng-packagr 根据 ng 的配置打包我们的库-package.json。此外，将 private 切换为 false，以便您可以在需要时发布您的库。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"
},
"private": false

现在是好东西。运行 npm run packagr，过程完成后，您会在项目根目录中找到一个 dist 文件夹。这是您的组件库。完全自给自足，根据最佳实践打包，并准备好将它的红色头灯照亮世界。

要 PACK，运行 npm pack dist 否则你可以直接发布 npm publish dist/

在 npm 上发布

使用 npm login 登录到您的 npm 帐户后，您可以使用 npm publish dist 发布您的组件库。只需确保您有一个唯一的包名称(提示:可能会使用 my-component-library)。发布后，您将能够使用 npm install my-component-library 从 npm 安装组件库。

使用你的组件库

安装后，您可以将 header 组件导入到任何应用程序的 app.module.ts 中，方法是将其包含在其@NgModule 导入数组中……

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并在模板中使用它的选择器，就像您在应用程序中使用组件一样。

来源medium.com