近日笔者维护自己的几个无名小repo时，发觉想要创作一个第三方angular包，着实有一些不难但易乱的小问题，故作此文总结。本文将完成以下内容：
- 从空白开始搭建一个基于angular的第三方包
- 在本地测试待发布的包
- 在npm或yarn发布包中指定内容
- 在普通angular应用中引入并使用发布的包
基本项目搭建
一般的angular app使用angular-cli创建，直接ng new name搞定，生成的项目把webpack、AOT、dev server等细节都隐藏了，还支持各种参数来配置测试和sass等，使用起来直接npm run start、npm run build，可以说是非常傻瓜了，跳过了学习webpack等的许多大坑。
不过，如果是要搭建angular第三方包，预编译样式和打包部署这些一般就用不着了，取而代之的要熟悉npm(yarn)、tsconfig。
初始化
项目搭建命令如下：
mkdir my-ng-lib cd my-ng-lib yarn init
一路回车(实际情况中还是要编辑好包的基本信息)最终得到一个package.json，然后vscode打开：
初始化npm包
依赖
作为angular的第三方包，首先需要安装如下依赖：
依赖安装
其中typescript指定了版本是为了和当前angular-cli使用的版本保持一致，实际可能不必要这么做。
现在安装了开发时要用到的包，但这些包并不用在发布以后，实际上发布的时候我们想要的只是发布自己写的代码，而不是依赖的代码，这需要在package.json中配置peerDependencies作为前置依赖，但包本身不会实际安装这些依赖，实际的包应该由应用项目来安装。现在把peerDependencies添加进package.json：
"peerDependencies": {
"@angular/common": ">=5.0.0",
"@angular/core": ">=5.0.0",
"rxjs": ">=5.0.0"
}
项目编写
基本项目搭建好后，我们应该只有package.json、node_modules和一个lock文件在项目中，现在要加上真正的项目代码了。
无论这个包是用来实现什么目的的，作为一个第三方包，都应该要导出自己的功能以让其他项目引入使用，所以在项目根目录首先要有一个index.js文件，而我们要开发的是基于angular的Typescript包，使用的自然是index.ts了，内容就是各种export导出类型、接口、方法等。作为示例这里只导出一个常量：
export const myNgLib: string = 'Hello, thie is my angular 3rd part lib';
为了支持Typescript我们还需要一个tsconfig.json：
{
"compilerOptions": {
"baseUrl": ".", // 基于哪个目录编译ts
"declaration": true, // 是否生成声明文件即*.d.ts文件，有了它才有TS的代码提示
"experimentalDecorators": true, // 用于支持TS装饰器如angular中的 @NgModule({}) 之类
"emitDecoratormetadata": true, // 用于支持TS装饰器如angular中的 @NgModule({}) 之类
"module": "commonjs", // 模块化形式
"moduleResolution": "node", // 模块化形式
"rootDir": ".", // 以哪个目录为根
"lib": ["es2015", "dom"], // 支持编译的内置库
"skipDefaultLibCheck": true, // 是否跳过内置库检查
"skipLibCheck": true, // 跳过库检查
"target": "es5", // 编译目标版本
"suppressImplicitAnyIndexErrors": true, // 几个检查代码的规则
"strictNullChecks": true, // 几个检查代码的规则
"noImplicitAny": true, // 几个检查代码的规则
"sourceMap": true, // 是否生成 .js.map
"removeComments": true, // 移除注释
"noFallthroughCasesInSwitch": true // 几个检查代码的规则
},
"exclude": [ // 编译时排除以下内容
"node_modules",
"*.d.ts",
"***.js src*.js.map src*.d.ts linktest.tgz", // 清理编译文件
"link": "npm run pack && tar -zxf linktest.tgz && rimraf ../lib-test-app/node_modules/my-ng-lib && mv package ../lib-test-app/node_modules/my-ng-lib", // 打包后解压并移动到测试项目node_modules中
"pack": "npm run prepublish && yarn pack --filename linktest.tgz" // 执行编译并打包
}
总结
- 发布基于angular的第三方包的两个难点：一是如何处理好Typescript的编译，二是如何处理好angular运行上下文。
- 本文的命令均使用yarn完成，npm版本命令大同小异均有其对应命令，且发布的包都是在npm托管。
- 另外本文仅涉及发布最基本的基于angular的第三方包，包的实际功能方面没有做深入。其实对于不同功能的第三方包，仍有需要学习的内容。
参考资料：
How to create an Angular component library, and how to consume it using SystemJs or Webpack
stories linked library
npm link doesn't work with 1.5.4 version
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
