- 开始搭建一个基于angular的第三方包
- 从本地测试并发布包
- 在项目中引入使用
1. 初始化
在磁盘中创建开发目录，并初始化项目。cmd下
mkdir ceeety-test
cd ceeety-test
npm init
npm init.png
在npm init之后，需要逐步填写第三方包的基本信息（项目名不可以大写）不填写可以直接回车。执行完毕后项目中只有一个package.json，
2. 依赖
npm install --dev typescript@2.4.2 @angular/core @angular/common rxjs zone.js
依赖安装完成后，目录下将有两个文件：
package.json文件如下（依赖）
{
"name": "ceeety-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
此时安装的包并不需要发布，发布时只发布代码，需要在package.json中配置peerDependencies作为前置依赖，但包本身不会实际安装这些依赖，实际的包应该由应用项目来安装，现在把peerDependencies添加进package.json
"peerDependencies": {
"@angular/common": ">=5.0.0",
"@angular/core": ">=5.0.0",
"rxjs": ">=5.0.0"
}
devDependencies与peerDependencies的区别：
我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：
--save-dev
--save
在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，责被写入到 dependencies 对象里面去。
那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。
3. 项目编写
- 创建lib文件夹，并在文件夹下创建search.module.ts与search.component.ts文件
search.component.ts文件
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'app-search',
template: `
<input type="text" class="form-control" #info placeholder="{{information}}">
<button type="button" class="btn btn-default" (click)="query(info.value);">查询</button>
`,
})
export class SearchComponent implements OnInit {
@Input() information: string;
@Input() url: string;
dataUrl: string;
@Output() editData = new EventEmitter<any>();
constructor() { }
ngOnInit() {
}
query(info: string) {
this.dataUrl = this.url + '/' + info;
this.editData.emit(this.dataUrl);
}
}
search.module.ts文件
import { SearchComponent } from './search.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
SearchComponent
],
imports: [
CommonModule
],
providers: [],
exports: [SearchComponent],
})
export class SearchModule { }
demo写完需要导出自己的功能，让其他项目引用，所以在项目根目录下创建一个index.ts文件,文件内容：
export * from './lib/search.module';
为了支持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",
"**/*.d.ts"
]
}
4. 项目发布
项目可以发布在npm的registry中，也可以发布在私有库中
选择性发布:
基于angular的第三方包区别与普通的js包最大的地方就在于，不能直接把整个包都发布到npm，这样会导致奇怪错误，原因在于.ts文件，实际上需要发布的只是.js、.js.map、.d.ts这三种类型的文件就够了。
因为在其他项目中不一定会使用TypeScript，即使用了也不会刻意包含node_modules目录，也就是说其他项目只管使用，编译的活由我们得包自己来做，相反要是我们还发布多余的.ts文件，只会导致错误。
为了做到选择性发布，需要一个.npmignore文件，和.gitignore配合用来忽略上传的文件，一般这些编译输出我们会添加在.gitignore中，若项目不存在.npmignore，发布到npm时也会使用.gitignore，这不是我们想要的，所以需要再创建这个.npmignore来忽略.ts文件而包含编译输出，.npmignore内容：(按情况修改)
node_modules
.npmignore
tsconfig.json
*.ts
!*.d.ts
*.log
*.tgz
发布在npm库：
- 1.注册npm账号： 地址：https://www.npmjs.com
- 进入项目根目录下打开终端
运行：npm login
输入账号、密码、邮箱
登录成功后：运行npm publish
- 进入项目根目录下打开终端
5.项目引用
- 安装依赖
cnpm install ceeety-test
-
引入到项目中
第三方包引入.png
.html中：
<app-search [information]="information" [url]="url " (editData)="query($event)"></app-search>
.ts文件中
information = '输入班级名称';
url = 'Class/find';
dataUrl: string;
query(info: any) {
this.dataUrl = info;
}
运行项目查看结果。
其他
为了测试方便可以修改package.json中script:
"scripts": {
"prepublish": "npm run clean && tsc", // 清理并编译
"clean": "rimraf index.js index.js.map index.d.ts src/**/*.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 && npm pack --filename linktest.tgz" // 执行编译并打包
}
执行时，使用npm run prepublish形式，clean命令需要先安装
npm install rimraf -g
