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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
js实现碰撞检测
Jan 29 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
根德YB400的电路分析
2021/03/02 无线电
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
JavaScript中的包装对象介绍
2015/01/27 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python实现自动装机功能案例分析
2020/10/22 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
毕业生应聘求职信
2014/07/10 职场文书
2014年销售员工作总结
2014/12/01 职场文书
导师鉴定意见
2015/06/05 职场文书
总经理聘用协议书
2015/09/21 职场文书
班级班风口号大全
2015/12/25 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python