如何利用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 */)]
}
复制代码

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

查看所有标签

猜你喜欢:

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

Measure What Matters

Measure What Matters

John Doerr / Portfolio / 2018-4-24 / GBP 19.67

In the fall of 1999, John Doerr met with the founders of a start-up he’d just given $11.8 million, the biggest investment of his career. Larry Page and Sergey Brin had amazing technology, entrepreneur......一起来看看 《Measure What Matters》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

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

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码