本篇內(nèi)容介紹了“Angular2庫(kù)怎么用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供羅源網(wǎng)站建設(shè)、羅源做網(wǎng)站、羅源網(wǎng)站設(shè)計(jì)、羅源網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、羅源企業(yè)網(wǎng)站模板建站服務(wù)，10多年羅源做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

回想以前外鏈script標(biāo)簽引用插件方式統(tǒng)治前端的時(shí)候，想要寫(xiě)一個(gè)通用的ng1小插件的流程大概是：

1. 在單獨(dú)的angular.module("myPlugin")中寫(xiě)指令、服務(wù)、過(guò)濾器等

2.將其壓縮打包成myplugin.min.js

3.其他項(xiàng)目中引入這個(gè)腳本然后angular.module("", ["myPlugin"])

現(xiàn)在到了ng2的時(shí)代，ng2自己的核心依賴(lài)都是使用npm管理的(而且是基于TypeScript)，還非要手動(dòng)寫(xiě)出一個(gè)xxx.min.js總給人一種無(wú)從下手的感覺(jué)，所以現(xiàn)在如果要開(kāi)發(fā)自己的ng2庫(kù)的話(huà)也要入鄉(xiāng)隨俗，利用起npm這個(gè)好東西。

筆者對(duì)于npm起初也是一臉懵逼，到現(xiàn)在也不敢說(shuō)自己已能熟練使用之，不過(guò)npm只是個(gè)平臺(tái)，是為了方便開(kāi)發(fā)者而存在的，而不是為了“為難”開(kāi)發(fā)者，所以一點(diǎn)點(diǎn)摸索，也能使用得還過(guò)得去。

先給出在發(fā)布ng2庫(kù)到npm的整個(gè)大體的流程：

1. 要有一個(gè)ng2庫(kù)的完善的信息描述以及依賴(lài)文件（自然就是package.json）

2. 安裝ng2庫(kù)需要的依賴(lài)

3. 編寫(xiě)實(shí)際代碼

4. 在根路徑下建立一個(gè)index文件導(dǎo)出依賴(lài)（比如你寫(xiě)的服務(wù)啊模塊啊等等）

5. TypeScript預(yù)發(fā)布（寫(xiě)的是.ts文件，這一步將生成得到.js.map、.js以及.d.ts文件）

6. 鏈接到npm并發(fā)布

下面筆者將演示如何把之前寫(xiě)過(guò)的一個(gè)音頻服務(wù)發(fā)布到npm。

一、建立項(xiàng)目

創(chuàng)建根目錄ng2-firstyitimo，進(jìn)入后cmd里直接 npm init，照著引導(dǎo)一步步敲如我們的ng2庫(kù)的信息，包括了其版本號(hào)、作者、描述等信息，最終npm會(huì)為我們創(chuàng)建出這個(gè)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"
}

這些參數(shù)大家肯定都見(jiàn)多非常熟悉了，這里只多提一點(diǎn)就是其中的 version字段，每次重新publish我們的庫(kù)到npm時(shí)，都要更新此字段的值（因?yàn)榘姹靖铝寺铮?/p>

二、添加依賴(lài)

下一步就是要添加依賴(lài)，我們要發(fā)布的是ng2庫(kù)，所以必要的ng2依賴(lài)是肯定要有的，還有就是發(fā)布時(shí)編譯將使用到的typescript工具以及ng2的類(lèi)型預(yù)定義庫(kù)，由于筆者使用的ng2版本是比較新的，使用到的依賴(lài)就在下面這個(gè)最新的完整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"
 }
}

雖說(shuō)是完整的package.json但是代碼也非常少，因?yàn)橐獙?xiě)的只是個(gè)ng2庫(kù)而已，需要的只有common以及core兩個(gè)ng2依賴(lài)。當(dāng)然正常情況下，為了開(kāi)發(fā)調(diào)試還是需要引入其他的依賴(lài)，如果向上面這樣只引用最少的東西，那就只能發(fā)布后在其他項(xiàng)目中引用了才能看到效果（因?yàn)榇隧?xiàng)目本身并不能運(yùn)行）。

三、實(shí)際代碼

然后建立一個(gè)src目錄，在里面編寫(xiě)實(shí)際的代碼，這里要寫(xiě)的是之前寫(xiě)過(guò)的音頻服務(wù)，代碼就不給出了，完成后的文件結(jié)構(gòu)如下：

 

這里筆者選擇導(dǎo)出的是整個(gè)音頻模塊，所以里面的audio-studio組件必須在模塊的exports中聲明過(guò)，否則在其他項(xiàng)目中就是用不了這個(gè)組件了，不過(guò)其他的組件或指令不打算給外界使用，所以就不導(dǎo)出。服務(wù)也不需要導(dǎo)出，但是要在providers中聲明，并在后面的index中導(dǎo)出（不然就不能給其他項(xiàng)目使用此服務(wù)了）。

四、使用index文件導(dǎo)出庫(kù)

我們定義好的AudioModule以及AudioService是需要被其他項(xiàng)目引用或使用的，所以必須讓外界知道我們的庫(kù)提供了這兩個(gè)東西（還有個(gè)組件的話(huà)由于是在html標(biāo)簽中使用，不需要被ts代碼知道，所以exports導(dǎo)出就夠了），這時(shí)就要在根目錄下建立一個(gè)index.ts文件，內(nèi)容非常簡(jiǎn)單，導(dǎo)出模塊和服務(wù)就夠了：

export * from './src/audio.module';
export * from './src/services/audio.service';

五、發(fā)布我們的ng2庫(kù)

現(xiàn)在最前面講到的6個(gè)步驟還剩5、6兩步，僅僅是在cmd悄悄指令就能完成。但是在這之前我們還需要一個(gè)tsconfig.json，用來(lái)告訴typescript要如何編譯我們的ts文件以及里面的類(lèi)型預(yù)定義，如果沒(méi)有這個(gè)文件項(xiàng)目中的實(shí)際代碼是會(huì)報(bào)一大堆錯(cuò)誤的，并且還不能被編譯。筆者這里給出的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"
 ]
}

現(xiàn)在一鼓作氣來(lái)敲指令玩：

npm run prepublish

npm link

npm link ng2-firstyitimo

npm publish

完成了，現(xiàn)在在其他項(xiàng)目中安裝這個(gè)剛發(fā)布的ng2庫(kù)：

npm install --save ng2-firstyitimo

使用的時(shí)候：

import {AudioModule,AudioService} from 'ng2-firstyitimo';

總結(jié)：

發(fā)布ng2庫(kù)到npm的流程其實(shí)非常簡(jiǎn)單，而且非常有成就感。個(gè)人認(rèn)為的難點(diǎn)就在于跨不出第一步，就像筆者在之前也是完全沒(méi)頭緒，想寫(xiě)個(gè)自己的ng2還得用npm，不過(guò)發(fā)布成功過(guò)一次之后，會(huì)發(fā)現(xiàn)這么一套流程其實(shí)都很清晰明了，并且還要再次提到，npm對(duì)ng2開(kāi)發(fā)的幫助實(shí)在是太大了。

“Angular2庫(kù)怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享文章：Angular2庫(kù)怎么用
文章出自：http://aaarwkj.com/article26/pdepcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作、軟件開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)