Viết library cho angular2

angular 2

7

TypeScript

8

noname viết ngày 25/03/2016

Dạo này đang ngồi nghịch thằng Angular2, thấy có khá nhiều cái hay, 1 trong số đó là có thể dùng Typescripts để code thay cho js, mặc dù khì chạy thì nó cũng build ra file js mà thôi. Nhưng nó tiết kiệm thời gian code khá nhiều, và nhìn code cũng đẹp, dễ hiểu hơn.
Nhân tiện đây mình cũng viết 1 bài về cách viết lib và publish cho angular2 dùng Typescript. Bời vì bản chính thức đến giữa tháng 5 mới ra mắt, nên chưa có nhiều lib cho nó, nên mình sẽ có nhiều cái để viết và publish lên git.
Ví dụ 1 cái mình viết ở đây :D : https://github.com/dieuhd/angular2-active-record/

Cấu trúc folder

- name_file_lib.ts #có thể đặt trong thư mục `lib`
- package.json
- .gitignore #không có cũng được
- .npmignore # ko bắt buộc
- tsconfig.json
- README.md 

Đầu tiên mình sẽ giải thích file package.json

{
  "name": "tên library ví dụ angular2-highlight",
  "version": "version hiện tại",
  "description": "Mô tả",
  "repository": {
    "type": "git",
    "url": "đường dẫn git của library này"
  },
  "scripts": { # default dùng thế này
    "dev": "tsc --watch",
    "build": "rm -rf lib && tsc -p src",
    "prepublish": "tsc"
  },
  "keywords": [
    # những keyword mà bạn kỳ vọng khi search sẽ ra lib của bạn
  ],
  "author": "tên user trên git",
  "license": "MIT",
  "main": "đường dẫn tời file của lib của bạn", # chú ý đây là file js nhé, mặc dù viết bằng `ts` nhưng khi build nó sẽ sinh ra 1 file `js`
  "typings": "đường dẫn file ts sinh ra khi build(có ext là `.d.ts`)",
  "homepage": "your homepage",
  "dependencies": { # các lib mình dùng để phục vụ cho việc viết library
    "angular2": ">=2.0.0-beta.9",
    "zone.js": "^0.5.15",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.33.13",
    "rxjs": "5.0.0-beta.2",
    "reflect-metadata": "0.1.2",
    "typings": "^0.6.8"
  },
  "devDependencies": {
    "systemjs": "~0.19.6",
    "typescript": "^1.8.7"
  }
}

Tiếp theo file tsconfig.json

{
   "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5", #cái mà mình muốn build ra theo chuẩn nào ES5,ES6
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
       "outDir": "./src", # mặc định là thư mục hiện tại của file lib bạn viết
        "declaration": true
    }
}

Bây giờ chúng ta sẽ đi bắt đầu viết library sau khi đã config xong. Ví dụ chúng ta viết 1 library dùng để highlight text chẳng hạn. Xem ngay trên trang docs của angular2 có cái này rồi: https://angular.io/docs/ts/latest/guide/attribute-directives.html

import {Directive, ElementRef, Input} from 'angular2/core';
@Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }
  onMouseEnter() { this._highlight("yellow"); }
  onMouseLeave() { this._highlight(null); }
  private _highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Ok bây giờ chúng ta sẽ đưa nó lên trang npmjs.com, tất nhiên trước đó phải đưa project lên github trước. :D
Nếu chưa có account trên trang npmjs.com thì hãy đăng ký 1 account nhé.
Tiếp theo vào command line, ở project library: add account vừa đăng ký

npm adduser

Trước khi publsh thì cài hoặc update lại các lib mình dùng cho project

npm install 
npm update

Cuối cùng là publish nó thôi

npm publish

Bây giờ chúng ta sẽ test xem nó có chạy được chưa.
Tạo 1 project angular2
Cài đặt library mình vừa viết:

npm install angular2-highlight # tên library mình đã đặt

Trong file component nào đó:

import {Component} from 'angular2/core';
import {HighlightDirective} from 'angular2-highlight';
@Component({
  selector: 'my-app',
  templateUrl: '<p [myHighlight]="color">Highlight me!</p>',
  directives: [HighlightDirective]
})
export class AppComponent { }

Kiếm tra đã chạy hay chưa, nếu chưa thì hãy kiếm tra các bước trước đó nhé.
Hoặc sửa lại file config như sau nhé:

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },
  baseURL: '/',
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: {
      "angular2-highlight": "node_modules/angular2-highlight/angular2-highlight.js"
  },
});

Hi vọng sẽ có nhiều library do anh em kipalog viết :D