Angular2库初探


Posted in Javascript onMarch 01, 2017

从去年年底开始使用ng2,遇到并解决或被虐了一些问题点,对其各种新特性与开发模式感觉还算舒服。还有的一个感想就是,要使用ng2还得先学习不少其他东西,比如TypeScript语法,比如ES6新特性,还有就是酷炫的npm平台。本文就将侧重点放到npm上来,看看npm平台给ng2带来的酷炫的帮助。

现在眼前有一个问题:

我写了一个自己很满意的ng2的通用小组件,现在想要在以后的其他项目中都使用它,甚至想要把它分享给互联网上其他同时在被代码虐的兄弟们一起使用,这要如何实现呢?

回想以前外链script标签引用插件方式统治前端的时候,想要写一个通用的ng1小插件的流程大概是:

1. 在单独的angular.module("myPlugin")中写指令、服务、过滤器等

2.将其压缩打包成myplugin.min.js

3.其他项目中引入这个脚本然后angular.module("", ["myPlugin"])

现在到了ng2的时代,ng2自己的核心依赖都是使用npm管理的(而且是基于TypeScript),还非要手动写出一个xxx.min.js总给人一种无从下手的感觉,所以现在如果要开发自己的ng2库的话也要入乡随俗,利用起npm这个好东西。

笔者对于npm起初也是一脸懵逼,到现在也不敢说自己已能熟练使用之,不过npm只是个平台,是为了方便开发者而存在的,而不是为了“为难”开发者,所以一点点摸索,也能使用得还过得去。

先给出在发布ng2库到npm的整个大体的流程:

1. 要有一个ng2库的完善的信息描述以及依赖文件(自然就是package.json)

2. 安装ng2库需要的依赖

3. 编写实际代码

4. 在根路径下建立一个index文件导出依赖(比如你写的服务啊模块啊等等)

5. TypeScript预发布(写的是.ts文件,这一步将生成得到.js.map、.js以及.d.ts文件)

6. 链接到npm并发布

下面笔者将演示如何把之前写过的一个音频服务发布到npm。

一、建立项目

创建根目录ng2-firstyitimo,进入后cmd里直接 npm init ,照着引导一步步敲如我们的ng2库的信息,包括了其版本号、作者、描述等信息,最终npm会为我们创建出这个package.json文件:

{
 "name": "ng2-firstyitimo",
 "version": "1.0.0",
 "description": "angular2 lib publishing test by yitimo",
 "main": "index.js",
 "scripts": {
 "prepublish": "tsc"
 },
 "keywords": [
 "angular2"
 ],
 "author": "yitimo",
 "license": "MIT"
}

这些参数大家肯定都见多非常熟悉了,这里只多提一点就是其中的 version 字段,每次重新publish我们的库到npm时,都要更新此字段的值(因为版本更新了嘛)。

二、添加依赖

下一步就是要添加依赖,我们要发布的是ng2库,所以必要的ng2依赖是肯定要有的,还有就是发布时编译将使用到的typescript工具以及ng2的类型预定义库,由于笔者使用的ng2版本是比较新的,使用到的依赖就在下面这个最新的完整package.json文件中:

{
 "name": "ng2-firstyitimo",
 "version": "1.0.4",
 "description": "angular2 lib publishing test by yitimo",
 "main": "index.js",
 "scripts": {
 "prepublish": "tsc"
 },
 "keywords": [
 "angular2"
 ],
 "author": "yitimo",
 "license": "MIT",
 "dependencies": {
 "@angular/common": "^2.4.6",
 "@angular/core": "^2.4.6",
 "rxjs": "^5.2.0"
 },
 "devDependencies": {
 "@types/core-js": "^0.9.35",
 "typescript": "^2.2.1"
 }
}

虽说是完整的package.json但是代码也非常少,因为要写的只是个ng2库而已,需要的只有common以及core两个ng2依赖。当然正常情况下,为了开发调试还是需要引入其他的依赖,如果向上面这样只引用最少的东西,那就只能发布后在其他项目中引用了才能看到效果(因为此项目本身并不能运行)。

三、实际代码

然后建立一个src目录,在里面编写实际的代码,这里要写的是之前写过的音频服务,代码就不给出了,完成后的文件结构如下:

 Angular2库初探

这里笔者选择导出的是整个音频模块,所以里面的audio-studio组件必须在模块的exports中声明过,否则在其他项目中就是用不了这个组件了,不过其他的组件或指令不打算给外界使用,所以就不导出。服务也不需要导出,但是要在providers中声明,并在后面的index中导出(不然就不能给其他项目使用此服务了)。

四、使用index文件导出库

我们定义好的AudioModule以及AudioService是需要被其他项目引用或使用的,所以必须让外界知道我们的库提供了这两个东西(还有个组件的话由于是在html标签中使用,不需要被ts代码知道,所以exports导出就够了),这时就要在根目录下建立一个index.ts文件,内容非常简单,导出模块和服务就够了:

export * from './src/audio.module';
export * from './src/services/audio.service';

五、发布我们的ng2库

现在最前面讲到的6个步骤还剩5、6两步,仅仅是在cmd悄悄指令就能完成。但是在这之前我们还需要一个tsconfig.json,用来告诉typescript要如何编译我们的ts文件以及里面的类型预定义,如果没有这个文件项目中的实际代码是会报一大堆错误的,并且还不能被编译。笔者这里给出的tsconfig.json如下所示:

{
 "compilerOptions": {
  "noImplicitAny": true,
  "module": "commonjs",
  "target": "ES5",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "sourceMap": true,
  "declaration": true,
  "typeRoots": [
   "../node_modules/@types"
  ],
  "types" : [
   "core-js"
  ]
 },
 "files": [
  "index.ts"
 ],
 "exclude": [
  "node_modules"
 ]
}

现在一鼓作气来敲指令玩:

npm run prepublish

Angular2库初探

npm link

Angular2库初探

npm link ng2-firstyitimo

Angular2库初探

npm publish

Angular2库初探

完成了,现在在其他项目中安装这个刚发布的ng2库:

npm install --save ng2-firstyitimo

使用的时候:

import {AudioModule,AudioService} from 'ng2-firstyitimo';

总结:

发布ng2库到npm的流程其实非常简单,而且非常有成就感。个人认为的难点就在于跨不出第一步,就像笔者在之前也是完全没头绪,想写个自己的ng2还得用npm,不过发布成功过一次之后,会发现这么一套流程其实都很清晰明了,并且还要再次提到,npm对ng2开发的帮助实在是太大了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 #Javascript
JavaScript两个变量交换值的实现方法
Mar 01 #Javascript
js实现仿购物车加减效果
Mar 01 #Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 #Javascript
js实现拖拽功能
Mar 01 #Javascript
js实现下拉菜单效果
Mar 01 #Javascript
JS实现复制功能
Mar 01 #Javascript
You might like
几个学习PHP的网址
2006/11/25 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
pycharm安装图文教程
2017/05/02 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python中的类与类型示例详解
2019/07/10 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
全国优秀辅导员事迹材料
2014/05/14 职场文书
公司更名通知函
2015/04/24 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA