Angular第三方库开发实践

栏目: JavaScript · 发布时间: 6年前

内容简介:从接触Angular到如今,做了不少Angular项目,使用了不少第三方库,但是却没有勇气触碰第三方库的开发,一是没有太多的积累,二是没有找到合适的“Hello world”的文档。 最近有机会要把项目中常用的Component做成第三方库,方便更多的项目使用。根据网上找到的各种资料,加上走的各种弯路,终于摸清楚了开发第三方库的流程。为了方便第三方库的开发,我们首先要创建一个主应用A:

原文链接

从接触Angular到如今,做了不少Angular项目,使用了不少第三方库,但是却没有勇气触碰第三方库的开发,一是没有太多的积累,二是没有找到合适的“Hello world”的文档。 最近有机会要把项目中常用的Component做成第三方库,方便更多的项目使用。根据网上找到的各种资料,加上走的各种弯路,终于摸清楚了开发第三方库的流程。

搭建项目框架

为了方便第三方库的开发,我们首先要创建一个主应用A:

ng new projectnameA    //创建主应用
复制代码

主应用A创建好之后,创建Lib:

cd projectnameA
ng g library libName --prefix  prefixName //--prefix是Lib使用的前缀
复制代码

上述命令会对主应用如下改变:

  1. 在主应用A下创建 projects/libName 目录,并将Lib的相关文件放于此;

  2. 在 angular.json 文件中添加 libName 项目;

    "libName": {
        "root": "projects/libName",
        "sourceRoot": "projects/libName/src",
        "projectType": "library",
        "prefix": "dteam-top",
        "architect": {
        "build": {
            "builder": "@angular-devkit/build-ng-packagr:build",
            "options": {
            "tsConfig": "projects/libName/tsconfig.lib.json",
            "project": "projects/libName/ng-package.json"
            },
            "configurations": {
            "production": {
                "project": "projects/libName/ng-package.prod.json"
            }
            }
        },
        "test": {...},
        "lint": {...}
        }
    }
    复制代码

    其中: root为Lib的根目录; sourceRoot为Lib的源代码目录; projectType为项目的类型; prefix为组件使用的前缀; architect为Angular的构建配置,可设置 build、test 和 lint。

  3. 在 package.json 文件中添加 ng-packagr 依赖;

  4. 在 tsconfig.json 文件中添加 libName 库的引用;

    {
        ...
        "paths": {
            "libName": [
                "dist/libName"
            ]
        }
        ...
    }
    复制代码

这样项目框架就搭建好了,可以开始写Lib的代码了。

Lib开发

在Lib中需要注意一个文件:public_api.ts,这个文件是Lib的入口文件,取代了之前使用的index.ts文件,其中定义了Export的内容:

export * from './app/libName.component';
export * from './app/libName.module';
复制代码

主应用A要使用Lib,在app.module.ts文件中直接引用:

import { LibNameModule } from '../../../../projects/libName/src/app/libName.module'

imports: [
    ...
    LibNameModule,
    ...
]
复制代码

对于Lib中使用的其他组件,可在主应用A下通过npm安装,这里提醒下,这里是安装到主应用A的目录下,修改的是主应用A的package.json和package.lock.json文件。 这样,就可以开发自己的Lib了。

测试Lib的安装

Lib开发好之后,需要先在本地试安装。这时有疑问了,Lib中用到的其他组件的引入都是在主应用A的package.json中声明的,这对于Lib是不对滴。 细心的开发者会发现,在Lib的目录下也有一个package.json文件,其缺省内容为:

{
    "name": "libName",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
    }
}
复制代码

我们需要把这个文件补充完整,将Lib中用到的其他第三方组件在peerDependencies中引入,并将Lib的其他属性也加入。例如:

{
    "name": "ligName",
    "version": "0.0.1",
    "keywords": ["keyword1","keyword2"],
    "license": "MIT",
    "author": "authorName",
    "description": "description",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
        "@angular/forms": "7.0.2",
        "@angular/router": "7.0.2",
        "@angular/cdk": "7.0.2",
        "@angular/material": "7.0.2",
        "ngx-spinner": "7.0.0",
        "ngx-clipboard": "12.0.0",
        "ethers": "4.0.27",
        "rxjs": "6.3.3"
    }
}
复制代码

同时,还可以添加一个README.md文件,介绍Lib的使用方法。 准备工作做好之后,将Lib编译成产品:

ng build libName --prod
复制代码

编译后的文件会放置在主应用A的dist/libName目录下。另外创建一个Angular应用B,在此应用下执行:

npm install 主应用A/dist/libName
复制代码

安装时会对libName使用的其他第三方库给出类似如下的提示:

npm WARN libName@0.0.1 requires a peer of @angular/core@^7.2.0 but none is installed. You must install peer dependencies yourself.
复制代码

根据提示,自行安装缺少的组件即可。 在应用B的package.json中会看到对libName的引入:

"libName": "file:../projectnameA/dist/
复制代码

在应用B的package-lock.json文件中加入如下内容:

"libName": {
    "version": "file:../projectnameA/dist/libName",
    "requires": {
    "tslib": "^1.9.0"
    },
    "dependencies": {
    "tslib": {
        "version": "1.9.3",
        "bundled": true
    }
    }
}
复制代码

在应用B的app.module.ts文件中引入libName:

import { LibNameModule } from 'libName';

...
imports: [
    ...
    LibNameModule,
    ...
],
...
复制代码

在应用B中可以测试libName能否正常使用。

Lib发布

上述过程结束后,就可以将应用发布到npm上。准备工作:

  1. 在npm上注册账号。
  2. 在命令行下执行:npm adduser,将账号添加到本地。

好了,可以发布libName了。进入到projectnameA/dist/libName目录下执行:

npm publish
复制代码

看到了发布成功提示,还有点小激动。进入到npm中,可以看到已经发布成功的libName。 如果想删除这个libName,可以使用如下命令:

npm unpublish libNamet@0.0.1 --force
复制代码

这里需要特别注意的是:删除后的libName,在24小时内不能再发布了,见如下提示:

npm ERR! libName cannot be republished until 24 hours have passed.
复制代码

总结

npm为第三方库的开发还提供了一些便利的方法,如npm link命令。这些都有待我们在今后的开发中摸索和体验,以便更好的打磨精品组件。

附录

在开发过程中遇到了几个错误,现汇总如下:

权限错误:

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "libName". Are you logged in as the correct user? : libName
复制代码

解决办法,执行: npm adduser

libName若注入了其第三方的服务,主应用调用时出现如下错误:

Error: inject() must be called from an injection context
复制代码

解决方法,在主应用的angular.json文件中添加:

"projects": {
    "projectName": {
        "architect": {
            "build": {
                "options": {
                    "preserveSymlinks":true
                },
            },
        }
    }
    }
},
复制代码

若libName定义了自己的route,需要在主应用中注入RouterModule。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Data Structures and Algorithm Analysis in Java

Data Structures and Algorithm Analysis in Java

Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00

As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看 《Data Structures and Algorithm Analysis in Java》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具