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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
javascript操作cookie
Jan 17 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python读写csv文件实例代码
2019/07/05 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
会计专业自我鉴定范文
2013/12/29 职场文书
英语自我评价范文
2014/01/24 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
毕业生工作求职信
2014/06/30 职场文书
个人债务授权委托书
2014/10/17 职场文书
小学师德师风整改措施
2014/10/27 职场文书
优秀教师个人材料
2014/12/15 职场文书