Angular 发布一个属于自己的Library，实现项目模块化

发布一个属于自己的Library，实现项目模块化能做什么？

它可以实现你的组件从项目中脱离，在多个项目中灵活使用。

这篇文章主要在说什么？

这篇文章主要是从配置出发，扫描知识盲区，带你了解lib的实现过程，其中有大量的知识点，枯燥无味但不得不了解。

1.我将分析lib的实现的意义。

2.我将告诉你如果去实现css这类资源文件的打包。

3.我将我开发过程中了解到，个人认为重要的的记录下来，希望对今后开发有帮助。

 

 在Angular2 以后提出来了一个概念------模块化

这个模块的其实并不新奇，因为从事过Android的开发 ，我很早就知道模块化的好处。

1.只有一个主入口，其他功能可以像积木一样去拼接我们的项目，随时拆解替换。

2.我们多人同时开发的情况下预留出接口，可以做到互不影响功能，降低耦合度。

当然还有其他的好处，在这里就不细说了（毕竟我想藏私），今天的主题不在这里。我打算记录一下，这次探索的心得。

当我接触Angular  前端项目的时候，我为了多快好省采用了ng-bootstrap，primeng,两大框架。但是我在运用的过程中发现他们的控件很大程度上影响了项目功能上的发挥。

第一 primeng 的css 处理做的优化没有bootstrap好，很难去修改primeng 的控件样式。

第二 bootstrap采用全加载的方式，很多模块并用不上，却随着被使用模块一起加载了，影响效率，其次他的css居然是另一个包，我修改样式的时候快疯了。

我不禁思考这2个框架可以不可以整合在一起。既能模块拆分，又能实现css样式的修改。

于是我开始考虑如何去写一个Library。

（篇幅很长，只适合学习交流，不适合vc大法）

提出的第一个问题：怎么去创建一个自己的Angular Library？

因为primeng和bootstrap提供了Angular Library，我就觉的可以写一个自己的Angular Library来满足自己的项目。

于是乎百度得出这么一个流程：

创建第三方包

开发第三方包

测试第三方包

发布第三方包

使用第三方包

嗯，我就不说详细的步骤了 ，反正能百度的就不手写。说几个npm命令

ng new projectname  创建一个新的项目  projectname 是你的项目名称

cd projectname 到新项目目录下下去 

ng g library libraryname --prefix prefix  # libraryname : 第三方包名字 # prefix : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx)

这三行命令是一个基本步骤。下面我讲解下几个知识点：

首先你在完成上面命令时会生成这个样的目录结构 projects文件夹就是你lib包放的代码了 。默认是libraryname 文件夹下有一个src文件夹然后包涵如图所示没有画红线的文件。

 

 

值得我们注意的是 ng-package.json，tsconfig.lib.json,和packag