如何利用Angular-Cli创建库

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

内容简介:创建一个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 */)]
}
复制代码

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

查看所有标签

猜你喜欢:

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

Game Engine Architecture, Second Edition

Game Engine Architecture, Second Edition

Jason Gregory / A K Peters/CRC Press / 2014-8-15 / USD 69.95

A 2010 CHOICE outstanding academic title, this updated book covers the theory and practice of game engine software development. It explains practical concepts and techniques used by real game studios,......一起来看看 《Game Engine Architecture, Second Edition》 这本书的介绍吧!

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

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试