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

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

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

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

1. 在單獨的angular.module("myPlugin")中寫指令、服務、過濾器等

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

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

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

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

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

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

2. 安裝ng2庫需要的依賴

3. 編寫實際代碼

4. 在根路徑下建立一個index文件導出依賴（比如你寫的服務啊模塊啊等等）

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

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

下面筆者將演示如何把之前寫過的一個音頻服務發(fā)布到npm。

一、建立項目

創(chuàng)建根目錄ng2-firstyitimo，進入后cmd里直接 npm init ，照著引導一步步敲如我們的ng2庫的信息，包括了其版本號、作者、描述等信息，最終npm會為我們創(chuàng)建出這個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ù)大家肯定都見多非常熟悉了，這里只多提一點就是其中的 version 字段，每次重新publish我們的庫到npm時，都要更新此字段的值（因為版本更新了嘛）。

二、添加依賴

下一步就是要添加依賴，我們要發(fā)布的是ng2庫，所以必要的ng2依賴是肯定要有的，還有就是發(fā)布時編譯將使用到的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依賴。當然正常情況下，為了開發(fā)調試還是需要引入其他的依賴，如果向上面這樣只引用最少的東西，那就只能發(fā)布后在其他項目中引用了才能看到效果（因為此項目本身并不能運行）。

三、實際代碼

然后建立一個src目錄，在里面編寫實際的代碼，這里要寫的是之前寫過的音頻服務，代碼就不給出了，完成后的文件結構如下：

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

四、使用index文件導出庫

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

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

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

現(xiàn)在最前面講到的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"
 ]
}

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

npm run prepublish

npm link

npm link ng2-firstyitimo

npm publish

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

npm install --save ng2-firstyitimo

使用的時候：

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

總結：

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論