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

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:126 发布时间:2019-08-02
摘要:近日笔者维护自己的几个无名小repo时,发觉想要创作一个第三方angular包,着实有一些不难但易乱的小问题,故作此文总结。本文将完成以下内容: 从空白开始搭建一个基于angular的第三

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


  1. 从空白开始搭建一个基于angular的第三方包
  2. 在本地测试待发布的包
  3. 在npm或yarn发布包中指定内容
  4. 在普通angular应用中引入并使用发布的包
  • 开始搭建一个基于angular的第三方包
  • 从本地测试并发布包
  • 在项目中引入使用

基本项目搭建


一般的angular app使用angular-cli创建,直接ng new name搞定,生成的项目把webpack、AOT、dev server等细节都隐藏了,还支持各种参数来配置测试和sass等,使用起来直接npm run start、npm run build,可以说是非常傻瓜了,跳过了学习webpack等的许多大坑。

1. 初始化

在磁盘中创建开发目录,并初始化项目。cmd下

    mkdir ceeety-test
    cd ceeety-test
    npm init

皇牌天下投注网 1

npm init.png

在npm init之后,需要逐步填写第三方包的基本信息(项目名不可以大写)不填写可以直接回车。执行完毕后项目中只有一个package.json,

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

2. 依赖

npm install --dev typescript@2.4.2 @angular/core @angular/common rxjs zone.js

依赖安装完成后,目录下将有两个文件:

皇牌天下投注网 2

依赖安装完成后.png

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. 项目编写

皇牌天下投注网 3

demo的目录.png

  • 创建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"
  ]
}
mkdir my-ng-lib
cd my-ng-lib
yarn init

4. 项目发布

项目可以发布在npm的registry中,也可以发布在私有库中

皇牌天下投注网 4

npm源管理.png

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

选择性发布:

基于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

皇牌天下投注网 5

发布在npm库:
  • 1.注册npm账号: 地址:https://www.npmjs.com
    1. 进入项目根目录下打开终端
      运行:npm login
      输入账号、密码、邮箱
      登录成功后:运行npm publish

初始化npm包

5.项目引用

  1. 安装依赖
 cnpm install ceeety-test
  1. 引入到项目中
![](https://upload-images.jianshu.io/upload_images/5833645-a85cafca4eb4dec8.png)

第三方包引入.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

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

皇牌天下投注网 6

依赖安装

其中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",
  "**/*.d.ts"
 ]
}

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

"scripts": {
  "tsc": "tsc"
 }

皇牌天下投注网 7

编译得到.js、js.map、.d.ts

发布

完美,这么厉害的包,接下来赶紧发布它。发布命令是

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:angular第三方包开发整理(小结)

关键词:

上一篇:备忘的常用正则表达式皇牌天下投注网

下一篇:没有了

最火资讯