Angular2库怎么用

  介绍

本篇内容介绍了“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目录,在里面编写实际的代码,这里要写的是之前写过的音频服务,代码就不给出了,完成后的文件结构如下:

,  Angular2库怎么用“> </p> <p>这里笔者选择导出的是整个音频模块,所以里面的audio-studio组件必须在模块的出口中声明过,否则在其他项目中就是用不了这个组件了,不过其他的组件或指令不打算给外界使用,所以就不导出。服务也不需要导出,但是要在供应商中声明,并在后面的指数中导出(不然就不能给其他项目使用此服务了)。<h2 class=Angular2库怎么用