Angular2 CLI 是一个非常强大的工具，它可以为 Angular2 应用提供快速、可重复的构建，使开发人员可以更加专注于业务逻辑的实现。在这篇文章中，我们将介绍如何使用 Angular2 CLI 开发可重用组件，并将组件构建成可发布的 NPM 包，便于其他开发人员在他们的项目中使用这些组件。
首先，我们需要创建一个新的 Angular2 项目
在你的终端运行如下命令：
ng new my-app cd my-app
这将创建一个基于 Angular2 CLI 的新项目，并且我们将跳转到项目根目录。
开始创建可重用组件
我们可以使用 Angular2 CLI 命令来创建一个新组件。输入如下命令：
ng g component my-component
这将在项目中创建一个新组件并生成一些基本的结构，我们可以在这个基础上开发我们的可重用组件。
构建可重用组件
现在我们已经创建了一个可重用组件，接下来我们需要将其构建到一个独立的库中，方便在其他项目中使用这个组件。
我们可以通过以下步骤来构建新的库：
- 在项目根目录下创建一个新的文件夹，例如
my-library。 - 在
my-library文件夹中创建一个新的 Angular2 CLI 应用程序，运行命令ng new library。 - 在
my-library应用程序中将my-component源代码导入，这可以在src/app中实现。我们可以将我们刚刚已经创建的组件拷贝到这个新项目中。 - 在
my-library应用程序中创建一个新的index.ts文件，在其中导出所有的公共 API。例如，我们可以增加导出组件的语句：
export * from './app/my-component/my-component.component';
- 最后，我们需要将
my-component组件添加到my-library应用程序的package.json文件的peerDependencies和dependencies项中，这样我们将能够正常安装这个包。
-- -------------------- ---- ------- ------------------- - ------------------ ------------ -- -------- ---------------- ------------ -- -------- -- --------------- - ---------------------- ------------ -- -------- ------------------ ------------ -- -------- ---------------- ------------ -- -------- ----------------- ------------ -- -------- ---------------------------- ------------ -- -------- ------------------------------------ ------------ -- -------- -------------- --------- ---------- --------- ------- ------------ -- -------- ---------- --------- -
完成上述步骤后，我们就可以使用 npm pack 命令将我们的组件构建成一个 .tgz 文件，以便将其发布到 NPM 上。
这里是创建一个可重用组件包的完整步骤。你可以直接从 Github 下载代码：https://github.com/ng-developers/library-generator-demo。
如何使用可重用组件
现在，我们已经将 my-component 组件构建成了一个独立的库，并将其发布到了 NPM 上，现在我们需要展示如何在其他项目中使用该组件。
首先，我们需要安装这个包，这可以通过运行如下命令来实现：
npm install my-library
这将会安装一个名为 my-library 的包。在我们的应用中使用这个组件，我们可以，输入如下命令：
import { MyComponentComponent } from 'my-library';
@NgModule({
declarations: [
MyComponentComponent
]
})
export class MyModule { }现在，我们已经成功地在项目中使用可重用组件。
结论
在这篇文章中，我们介绍了如何使用 Angular2 CLI 来创建可重用组件和构建独立库的方法，以便在其他项目中使用这些组件。在当下的开发工作中，构建可重用组件是非常重要且必要的，因为它可以大大提高我们的开发效率，同时也有利于代码的维护和迭代。接下来你可以用这个例子练习，当然，你也可以前往我的 Github 仓库探索更多 Angular2 CLI 相关的内容：https://github.com/ng-developers。
示例代码
以下是示例代码，供参考：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- --------------------------------- -- ------ ----- -------------------- ---------- ------ - ------------- - - ---------- - - -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4f19ec5c563ced567e2a2