如何利用Angular-Cli创建库

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr这个指令做了三件事:

创建一个Angular库总是一个被关注的话题,随着Angular6的发布,创建库变得更统一和容易. 这篇文章介绍基于新的Angular-Cli来创建Angular的库

一.ng-packagr

ng-packagr已集成到angular-cli中,不再需要手动安装配置ng-packagr

二.环境,Angular-Cli 6+

如何利用Angular-Cli创建库

三.创建项目并生成库的Project

yarn global add @angular/cli   // 升级到Angular6+

ng new handle-batch-error       // 创建新项目

cd handle-batch-error       

ng g library batch-error        // 创建库!!
复制代码

四. ng g library

这个指令做了三件事:

1.创建projects为batch-error的子项目,生成子项目相关联的文件

如何利用Angular-Cli创建库

2.更新angular.json文件,添加build和test类库的配置

如何利用Angular-Cli创建库

3.安装一些用于build库的packages

tips1:

我们新建一个项目(handle-batch-error)后,再ng g library时,通常情况是想要library的名字和项目名相同,但ng g library却不能再命名为相同的名称(即handle-batch-error,事实上是不能和angular.json中的project name相同).

解决办法:改为驼峰命名即handleBatchError,生成的文件及package.json均和项目名(handle-batch-error)相同,而angular.json中生成的项目名为handleBatchError,

五.projects中文件介绍

1.ng-package.json

ng-packagr用来build的配置文件

2.package.json

类库的信息文件.

注意:开发库时,不应该随便用dependencies,而应该用peerDependencies。

3.src\public_api.ts

这是库的entryFile,你需要导出的所有内容都在这里面

export * from './lib/services/batch-error.service';
export * from './lib/batch-error.component';
export * from './lib/batch-error.module';
export * from './lib/constant/component.value';
复制代码

src内就如同我们正常开发angular项目一样,并无区别

六.build

执行 ng build batch-error --prod,生成dist

如何利用Angular-Cli创建库

tips2:angular.json中可以指定"defaultProject": "batch-error",执行ng build --prod即可

tips3:Angular支持打包生成多种可被使用的方式,具体介绍:

docs.google.com/document/d/… , 需翻墙

cd到dist/batch-error,执行npm publish,发布到npm仓库

七.使用类库

// module中引入类库
import {BatchErrorModule} from 'batch-error';

@NgModule({
  imports: [
    CommonModule,
    BatchErrorModule
  ]
})
复制代码
<!--html中使用组件-->
<lib-batch-error [statusId]="statusId"></lib-batch-error>
复制代码

参考文档:

1.Building an Angular Library with the Angular CLI (version 6)

2.使用 ng-packagr 打包 Angular

题外话:Vue的组件库打包,我是用的rollup,相当简单的配置,还有什么推荐的吗?

// rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
export default {
  input: './src/index.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  },
  plugins: [VuePlugin(/* VuePluginOptions */)]
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

C陷阱与缺陷

C陷阱与缺陷

凯尼格 / 高巍 / 人民邮电出版社 / 2008-2-1 / 30.00元

作者以自己1985年在Bell实验室时发表的一篇论文为基础,结合自己的工作经验扩展成为这本对C程序员具有珍贵价值的经典著作。写作本书的出发点不是要批判C语言,而是要帮助C程序员绕过编程过程中的陷阱和障碍。.. 全书分为8章,分别从词法分析、语法语义、连接、库函数、预处理器、可移植性缺陷等几个方面分析了C编程中可能遇到的问题。最后,作者用一章的篇幅给出了若干具有实用价值的建议。.. 本书......一起来看看 《C陷阱与缺陷》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具