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并非所有的一切都是对象
Apr 11 Javascript
jquery等待效果示例
May 01 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
如何使JavaScript休眠或等待
Apr 27 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 PDO中文乱码解决办法
2009/07/20 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
护士辞职信模板
2014/01/20 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
美丽的大脚观后感
2015/06/03 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
设置IIS Express并发数
2022/07/07 Servers