從去年年底開始使用ng2，遇到并解決或被虐了一些問(wèn)題點(diǎn)，對(duì)其各種新特性與開發(fā)模式感覺還算舒服。還有的一個(gè)感想就是，要使用ng2還得先學(xué)習(xí)不少其他東西，比如TypeScript語(yǔ)法，比如ES6新特性，還有就是酷炫的npm平臺(tái)。本文就將側(cè)重點(diǎn)放到npm上來(lái)，看看npm平臺(tái)給ng2帶來(lái)的酷炫的幫助。

現(xiàn)在眼前有一個(gè)問(wèn)題：

我寫了一個(gè)自己很滿意的ng2的通用小組件，現(xiàn)在想要在以后的其他項(xiàng)目中都使用它，甚至想要把它分享給互聯(lián)網(wǎng)上其他同時(shí)在被代碼虐的兄弟們一起使用，這要如何實(shí)現(xiàn)呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

下面筆者將演示如何把之前寫過(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ù)大家肯定都見多非常熟悉了，這里只多提一點(diǎn)就是其中的 version 字段，每次重新publish我們的庫(kù)到npm時(shí)，都要更新此字段的值（因?yàn)榘姹靖铝寺铮?/p>

二、添加依賴

下一步就是要添加依賴，我們要發(fā)布的是ng2庫(kù)，所以必要的ng2依賴是肯定要有的，還有就是發(fā)布時(shí)編譯將使用到的typescript工具以及ng2的類型預(yù)定義庫(kù)，由于筆者使用的ng2版本是比較新的，使用到的依賴就在下面這個(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)橐獙懙闹皇莻€(gè)ng2庫(kù)而已，需要的只有common以及core兩個(gè)ng2依賴。當(dāng)然正常情況下，為了開發(fā)調(diào)試還是需要引入其他的依賴，如果向上面這樣只引用最少的東西，那就只能發(fā)布后在其他項(xiàng)目中引用了才能看到效果（因?yàn)榇隧?xiàng)目本身并不能運(yùn)行）。

三、實(shí)際代碼

然后建立一個(gè)src目錄，在里面編寫實(shí)際的代碼，這里要寫的是之前寫過(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è)組件的話由于是在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文件以及里面的類型預(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)頭緒，想寫個(gè)自己的ng2還得用npm，不過(guò)發(fā)布成功過(guò)一次之后，會(huì)發(fā)現(xiàn)這么一套流程其實(shí)都很清晰明了，并且還要再次提到，npm對(duì)ng2開發(fā)的幫助實(shí)在是太大了。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論