發布自己的Angular2庫初探

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

現在眼前有一個問題：

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

 

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

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

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

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

 

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

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

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

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

2. 安裝ng2庫需要的依賴

3. 編寫實際代碼

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

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

6. 鏈接到npm並發布

 

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

一、建立項目

創建根目錄ng2-firstyitimo，進入后cmd里直接 npm init ，照着引導一步步敲如我們的ng2庫的信息，包括了其版本號、作者、描述等信息，最終npm會為我們創建出這個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"
}

這些參數大家肯定都見多非常熟悉了，這里只多提一點就是其中的 version 字段，每次重新publish我們的庫到npm時，都要更新此字段的值（因為版本更新了嘛）。

 

二、添加依賴

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

 

三、實際代碼

然后建立一個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';

 

五、發布我們的ng2庫

現在最前面講到的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"
    ]
}

 

現在一鼓作氣來敲指令玩：

npm run prepublish

---

 

 

npm link

---

 

 

npm link ng2-firstyitimo

---

 

 

 

npm publish

---

 

 

完成了，現在在其他項目中安裝這個剛發布的ng2庫：

npm install --save ng2-firstyitimo

使用的時候：

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

 

總結：

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