# @ceeety/core
> ceeety ng公共包
Latest version **1.1.6** (published 2018-05-23) · ISC license · 0 weekly downloads
## Install
```sh
npm install @ceeety/core
pnpm add @ceeety/core
yarn add @ceeety/core
bun add @ceeety/core
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.6 |
| Published | 2018-05-23 |
| First published | 2018-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 528 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | ceeety |
| Maintainers | ceeety-paranoid |
## Links
- npm: https://www.npmjs.com/package/@ceeety/core
- npm.io page: https://npm.io/package/@ceeety/core
## Dependencies (3)
- [gsap](https://npm.io/package/gsap.md) ^1.20.3
- [@types/gsap](https://npm.io/package/@types/gsap.md) ^1.19.2
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^1.7.4
## Recent versions
- 1.1.6 (latest) — 2018-05-23
## README
---
* 开始搭建一个基于angular的第三方包
* 从本地测试并发布包
* 在项目中引入使用
----
### 1. 初始化
在磁盘中创建开发目录，并初始化项目。cmd下
```
mkdir ceeety-test
cd ceeety-test
npm init
```
>
在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: `
`,
})
export class SearchComponent implements OnInit {
@Input() information: string;
@Input() url: string;
dataUrl: string;
@Output() editData = new EventEmitter();
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](https://www.npmjs.com/)
* 2. 进入项目根目录下打开终端
运行：npm login
输入账号、密码、邮箱
登录成功后：运行npm publish
### 5.项目引用
1. 安装依赖
```
cnpm install ceeety-test
```
2. 引入到项目中
.html中：
```
```
.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
```
---
_Source: https://npm.io/package/@ceeety/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._