角第三方包开发整理(小结)

　　

近日笔者维护自己的几个无名小回购时,发觉想要创作一个第三方角包着实有一些不难但易乱的小问题,故作此文总结。本文将完成以下内容:

　　
    　　<李>从空白开始搭建一个基于角的第三方包李 　　<李>在本地测试待发布的包李 　　<李>在npm或纱发布包中指定内容李 　　<李>在普通角应用中引入并使用发布的包李 　　
　　

<>强基本项目搭建

　　

一般的角度应用使用angular-cli创建,直接ng新名字搞的定,生成的项目把webpack, AOT, dev服务器等细节都隐藏了,还支持各种参数来配置测试和sass等,使用起来直接npm开始运行,npm运行构建,可以说是非常傻瓜了,跳过了学习webpack等的许多大坑。
　　

　　

不过,如果是要搭建角第三方包,预编译样式和打包部署这些一般就用不着了,取而代之的要熟悉npm(纱),tsconfig。

　　

<强>初始化

　　

项目搭建命令如下:

　　 　　 　　mkdir my-ng-lib 　　cd my-ng-lib 　　纱init 　　 　　

一路回车(实际情况中还是要编辑好包的基本信息)最终得到一个包中。json,然后vscode打开:
　　

　　

角第三方包开发整理(小结)

　　

初始化npm包
　　

　　

<强>依赖

　　

作为角的第三方包,首先需要安装如下依赖:
　　

　　

角第三方包开发整理(小结)

　　

依赖安装
　　

　　

其中打印稿指定了版本是为了和当前angular-cli使用的版本保持一致,实际可能不必要这么做。
　　

　　

现在安装了开发时要用到的包,但这些包并不用在发布以后,实际上发布的时候我们想要的只是发布自己写的代码,而不是依赖的代码,这需要在package.json中配置peerDependencies作为前置依赖,但包本身不会实际安装这些依赖,实际的包应该由应用项目来安装。现在把peerDependencies添加进package.json:

　　 　　 　　" peerDependencies ": { 　　“@angular/普通”:“在=5.0.0”, 　　“@angular/核心”:“在=5.0.0”, 　　:“rxjs祝辞=5.0.0” 　　} 　　 　　

<强>项目编写

　　

基本项目搭建好后,我们应该只有包。json, node_modules和一个锁文件在项目中,现在要加上真正的项目代码了。
　　

　　

无论这个包是用来实现什么目的的,作为一个第三方包,都应该要导出自己的功能以让其他项目引入使用,所以在项目根目录首先要有一个index.js文件,而我们要开发的是基于角的打印稿包,使用的自然是index.ts了,内容就是各种出口导出类型,接口,方法等。作为示例这里只导出一个常量:

　　 　　 　　出口const myNgLib:字符串=?这是我的第三部分自由角; 　　 　　

为了支持打印稿我们还需要一个tsconfig.json:

　　 　　 　　{ 　　" compilerOptions ": { 　　“baseUrl”:“。”//基于哪个目录编译ts 　　“宣言”:真的,//是否生成声明文件即* .d.ts文件,有了它才有TS的代码提示 　　“experimentalDecorators”:真的,//用于支持TS装饰器如角中的@NgModule({})之类 　　“emitDecoratorMetadata”:真的,//用于支持TS装饰器如角中的@NgModule({})之类 　　“模块”:“commonjs”//模块化形式 　　“moduleResolution”:“节点”,//模块化形式 　　“rootDir”:“。”//以哪个目录为根 　　“自由”:“es2015”、“dom”,//支持编译的内置库 　　“skipDefaultLibCheck”:真的,//是否跳过内置库检查 　　“skipLibCheck”:真的,//跳过库检查 　　“目标”:“es5 ",//编译目标版本 　　“suppressImplicitAnyIndexErrors”:真的,//几个检查代码的规则 　　“strictNullChecks”:真的,//几个检查代码的规则 　　“noImplicitAny”:真的,//几个检查代码的规则 　　“sourceMap”:真的,//是否生成.js.map 　　“removeComments”:真的,//移除注释 　　“noFallthroughCasesInSwitch”:真正的//几个检查代码的规则 　　}, 　　“排除”:[//编译时排除以下内容 　　“node_modules”, 　　“* .d.ts”, 　　“* */* .d.ts” 　　] 　　} 　　之前 　　 　　

其中的规则各有各效果,有些为了确定编译路径,有些为了语法检查,有些为了输出声明,还有排除规则等,现在可以tsc看看效果了,不过要先把tsc添加到package.json的脚本中:

角第三方包开发整理(小结)