Matt Jhou

1. 使用方式

 

2. 開發方式​(ng-packgr)

2-1. Component 打包  (漢堡選單)

2-2. Service 打包  (TimerService)

使用已開發完Angular Library

3. 參考資料​

1. 使用方式

$npm install burger-menu-0.0.0.tgz
$npm install timer-lib-0.0.0.tgz

1. 安裝打包好的 Library

2. 引入使用的Module

3. 使用封裝後 UI Component: Burger-Menu 

4. 使用封裝後 Service: TimerService

 2-1 開發方式

Component(漢堡選單)

1. 開發完功能 (1 module for 1 Feature): 漢堡選單, 並測試

2. npm install ng-packagr --save-dev

3. 新增定義檔 public_api.ts,  ng-package.json

4. 新增打包script 於 package.json

5. 執行打包指令

1.開發漢堡選單功能

2. ng-packagr

$npm install ng-packagr --save-dev

3-1. public_api.ts

export * from './src/app/modules/burger-menu/burger-menu.module';

3-2. ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

4. pacakge.json

5. 封裝

$npm run packagr

$cd dist

$npm pack

2-2.開發方式

Service (TimerService)

1. 開發完功能 (1 module for 1 Feature): Timerservice, 並測試

2. npm install ng-packagr --save-dev

3. 新增定義檔 public_api.ts,  ng-package.json

4. 新增打包script 於 package.json

5. 執行打包指令

1.開發Timer功能

$npm install easytimer --save

安裝 third party library

2. ng-packagr

$npm install ng-packagr --save-dev

3-1. public_api.ts

export * from './src/app/modules/timer/timer.module';

3-2. ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

4. pacakge.json

$npm run packagr

$cd dist

$npm pack

5. 封裝

3.參考資料

1. ng-packagr library:  https://www.npmjs.com/package/ng-packagr

2. Angular Team 介紹如和打包:  https://www.youtube.com/watch?v=unICbsPGFIA&feature=youtu.be

    a. 如何利用 tsc/ ngc/ rollup.js/ shellscript 打包 Angular Library

    b. Angular AOT Library必須要有的 format : d.ts/ metadata.json/ js

    c. 優化bundle後的library : rollup.js, flaterring, google closure...

3. Module: COMMON/ AMD/ UMD/ ES6

https://hackernoon.com/how-to-create-library-in-angular-2-and-publish-to-npm-from-scratch-f2b1272d6266

4. Webpack v.s. Rollup.js

https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Package Angualr Module Lib

By Matt Jhou

Made with Slides.com

Package Angualr Module Lib

  • 182

More from Matt Jhou