【實作紀錄】上傳自己的npm package

前言：現在都是npm install別人的package來用，想說哪天可以自己包一個上去給大家用？不過還沒想到要寫什麼package，所以研究怎麼上傳先。

本文目的：用最簡單的方式透過Angular打包一個hello world的package，上傳到npm上，讓使用者可以透過npm install下載下來用。

前置作業：註冊一個npm帳號

上傳方式

1.建立一個新專案，用來存放要發布的package

ng new <專案名稱> --create-application=false
// ex. ng new RayMedium --create-application=false

--create-application

設置為 false 意思是 ng new 不要在工作區中創建初始 Angular 應用程序。用這個模式去建，會發現建起來的時候沒有src資料夾，通常在要建立Angular Library的時候會透過這種方式建。

2.進到資料夾

cd <專案名稱>
// ex. cd RayMedium

3.建立待會要上傳的library

ng generate library <庫的名稱>
// ex. ng generate library mid4test

這邊在取名子的時候，記得先去npm上搜一下名字有沒有重複到

4.找到建起來的library中的Service

<專案名稱>/projects/<庫的名稱>/src/lib/<庫的名稱>.service.ts
// 檔案路徑

5.寫一個Hello World的Function

import { Injectable } from '@angular/core';
@Injectable({
    providedIn: 'root'
})
export class Mid4testService {
constructor() { }
    helloworld() {
      console.log('hello ray');
    }
}

6.寫好後編譯構建這個組件

ng build mid4test --prod

7.進到編譯完成後的檔案位置

cd dist/<庫的名字>

8.登入npm後上傳

npm login
npm publish

到這邊後去npm上就會看到剛剛寫的package了

使用方式

安裝

npm i <庫的名字>

庫的Service使用方式

import { Component, OnInit } from '@angular/core';
import { Mid4testService } from 'mid4test';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    title = 'npmUseTest';
    constructor(private mid4testService: Mid4testService) { }
    ngOnInit(): void {
        console.log(this.mid4testService.helloworld());
        // hello ray
    }
}

庫的Component使用方式

// import 到 app Module中

...
import { Mid4testModule } from 'mid4test';
@NgModule({
    declarations: [
       AppComponent
    ],
    imports: [
        ...,
        Mid4testModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
// import到 app.html 後就可以使用了
<lib-mid4test></lib-mid4test>

補充

1.如果要在 npm 中更新你的包，每次做完修改都需要到 package.json 更改版本號並再執行一次 npm publish，因為同一版本號不能重複publish。(記得是改庫的package.json，而不是改專案的package.json)

2.npm網址上的首頁細節資訊(ex.Build、Publishing…等等)，都在README.md中可以修改

參考

Angular + npm — How to Publish an Angular Component to npm

Angular Workspace: No Application for You!