本篇内容介绍了“Angular2库怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
回想以前外链脚本标签引用插件方式统治前端的时候,想要写一个通用的ng1小插件的流程大概是:
<强> 1。在单独的angular.module (“myPlugin")中写指令,服务,过滤器等强>
<强> 2。将其压缩打包成myplugin.min.js 强>
<强> 3。其他项目中引入这个脚本然后angular.module (““, [“myPlugin"]) 强>
现在到了喜欢的《忍者外传2》的时代,喜欢的《忍者外传2》自己的核心依赖都是使用npm管理的(而且是基于打印稿),还非要手动写出一个xxx.min.js总给人一种无从下手的感觉,所以现在如果要开发自己的喜欢的《忍者外传2》库的话也要入乡随俗,利用起npm这个好东西。
笔者对于npm起初也是一脸懵逼,到现在也不敢说自己已能熟练使用之,不过npm只是个平台,是为了方便开发者而存在的,而不是为了“为”难开发者,所以一点点摸索,也能使用得还过得去。
先给出在发布喜欢的《忍者外传2》库到npm的整个大体的流程:
<强> 1。要有一个喜欢的《忍者外传2》库的完善的信息描述以及依赖文件(自然就是package.json) 强>
<强> 2。安装喜欢的《忍者外传2》库需要的依赖强>
<强> 3。编写实际代码强>
<强> 4。在根路径下建立一个索引文件导出依赖(比如你写的服务啊模块啊等等)强>
<强> 5。打印稿预发布(写的是.ts文件,这一步将生成得到.js.map, js以及.d.ts文件)强>
<强> 6。链接到npm并发布强>
下面笔者将演示如何把之前写过的一个音频服务发布到npm。
<强>一、建立项目强>
创建根目录ng2-firstyitimo,进入后cmd里直接<强> npm init >强,照着引导一步步敲如我们的喜欢的《忍者外传2》库的信息,包括了其版本号,作者,描述等信息,最终npm会为我们创建出这个包。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" }
这些参数大家肯定都见多非常熟悉了,这里只多提一点就是其中的<强> 强>版本字段,每次重新发布我们的库到npm时,都要更新此字段的值(因为版本更新了嘛)。
<强>二、添加依赖强>
下一步就是要添加依赖,我们要发布的是喜欢的《忍者外传2》库,所以必要的喜欢的《忍者外传2》依赖是肯定要有的,还有就是发布时编译将使用到的打印稿工具以及喜欢的《忍者外传2》的类型预定义库,由于笔者使用的喜欢的《忍者外传2》版本是比较新的,使用到的依赖就在下面这个最新的完整包。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但是代码也非常少,因为要写的只是个喜欢的《忍者外传2》库而已,需要的只有共同以及核心两个喜欢的《忍者外传2》依赖。当然正常情况下,为了开发调试还是需要引入其他的依赖,如果向上面这样只引用最少的东西,那就只能发布后在其他项目中引用了才能看到效果(因为此项目本身并不能运行)。
<强>三,实际代码强>
然后建立一个src目录,在里面编写实际的代码,这里要写的是之前写过的音频服务,代码就不给出了,完成后的文件结构如下: