初めてのプライベート NPM パッケージを作成して公開する方法

この記事では、最初のプライベート npm パッケージを簡単に作成する方法を示したいと思います。

プライベート パッケージを作成して GitHubで公開する予定なので、この記事を開始する前に前提条件を理解していることを確認してください。それでは始めましょう。

前提条件:

• GitHubアカウントを作成します (まだ持っていない場合)

  
  

• TypeScript を使用して Node Express をセットアップする方法の記事を読む

  
  

• GitHub Actions を使用して最初から CI CD パイプラインをセットアップする方法の記事を読んでください (GitHub Actionsに慣れていない場合は、この記事を読んで GitHub Actions の仕組みを理解することを強くお勧めします)。

プライベート npm パッケージとは何ですか? どこで使用できますか?

• プライベート npm パッケージを使用すると、自分とアクセスできる人だけが見ることができるコードをホストできるため、プロジェクトでパブリック コードと一緒にプライベート コードを管理および使用できます。

プロジェクトの構造

math-lib/ --.github/ --workflows/ --main.yml --build/ this is autogenerated folder --src/ --app.ts --types/ --index.d.ts --.gitignore --package.json --tsconfig.json

パート 1:プライベート npm パッケージのビルド

ステップ 1: TypeScript を使用して Node.js プロジェクトを開始します。

注:これを行う方法については、この記事How to Setup a Node Express with TypeScriptに従って学習するか、このレポを複製するだけですhttps://github.com/YuraAbharian/node-express-typescript

ステップ 2:それでは、GitHub Actions ワークフローを作成しましょう。

• .github/workflowsディレクトリを作成する

  
  

• .github/workflowsディレクトリで、 main.ymlファイルを作成します。

  
  

• この記事「 How to Setup a CI CD Pipeline From Scratch with GitHub」に従って、GitHub Actions ワークフローに慣れることができます。

いくつかの設定を追加しましょう:

 name: Node.js Private Package on: push: branches: - master jobs: publish-gpr: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '14.x' registry-url: 'https://npm.pkg.github.com/' - run: npm install - run: npm run build - run: npm publish env: NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

注: GITHUB_TOKENを覚えておいてください。これについては後で詳しく説明します。

ステップ 3: src/app.tsファイルを作成/更新しましょう

export function sum(a: number, b: number): number { return a + b; } export function minus(a: number, b: number): number { return a - b; } export function divide(a: number, b: number): number { return a / b; } export function multiple(a: number, b: number): number { return a * b; }

ステップ 4:パッケージのモジュールを宣言する必要があります

• プロジェクトのルートにtypesディレクトリを作成します

  
  

• typesディレクトリにindex.d.tsファイルを作成します。

  
  

このモジュールの宣言型を追加します

declare module "@GITHUB_USERNAME/PACKAGE_NAME" { function sum(a: number, b: number): number; function minus(a: number, b: number): number; function divide(a: number, b: number): number; function multiple(a: number, b: number): number; }

ノート：

- GITHUB_USERNAMEはあなたの github ユーザー名です

- PACKAGE_NAMEあなたのプライベートパッケージ名です

例: 「@yuraabharian/math-lib」

ステップ 5: package.json ファイルに取り組みましょう

{ "name": "@GITHUB_USERNAME/PACKAGE_NAME", "version": "1.0.0", "description": "", "main": "./build/app.js", "author": "", "license": "ISC", "types": "./types/index.d.ts", "publishConfig": { "registry": "https://npm.pkg.github.com/" }, "repository": { "url": "git://github.com/GITHUB_USERNAME/PACKAGE_NAME.git" }, "scripts": { "build": "npx tsc" }, "devDependencies": { "@types/node": "^18.0.0", "typescript": "^4.7.4" } }

例: git://github.com/yuraabharian/math-lib.git (これは GitHub リポジトリへのリンクになります)

注:これらの @GITHUB_USERNAME/PACKAGE_NAME フィールドは、手順 4と同じです。

ステップ 6:コードをプッシュする前にリポジトリ環境を構成しましょう

• ステップ 2で、 GITHUB_TOKENを覚えておくようにお願いしました。この変数は非常に重要だからです。

  
  

• GitHub Repository - Settings

  
  

ステップ 7:次に、 Secretsに移動します

ステップ 8: Actions開く

• [ New repository secretクリックします。

必須:このリンクhttps://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-tokenに従って、新しいトークンを生成します。

注:この記事のパート 2 で必要になるため、 GITHUB_TOKENを別の場所に保存します。

注:このトークンにはwrite:packagesアクセス権のみを付与します

ステップ 9:コードをGitHubにプッシュしましょう

ステップ 10:リポジトリ → アクションを開くと、パッケージがデプロイされていることがわかります。

ステップ 11:パッケージを見つけるには、 GitHub プロファイル → パッケージに移動します。

最初の部分の結論: この時点で、パッケージがデプロイされていることがわかります。

この記事の第 2 部では、 npm install package以外にいくつかのアクションが必要なため、プライベート パッケージをインストールする方法を学習します。

パート 2:インストールとテスト

ステップ 1: Node.js プロジェクトをセットアップする

注:その方法は、パート 1 → ステップ 1で確認できます。

ステップ 2:次に、プロジェクトのルートでパッケージをすべてインストールします。 GitHub プロファイル → Packages → math-lib で取得できるパッケージへのリンク (これがパッケージ名です)

ステップ 3: src/app.ts ファイルに移動して更新します

import express, {Application, Request, Response} from 'express'; import {sum, minus, multiple, divide} from '@yuraabharian/math-lib'; const app: Application = express(); const PORT: number = 3001; app.use('/sum', (req: Request, res: Response): void => { res.send(`RESULT: ${sum(5, 2)}`, ); }); app.use('/minus', (req: Request, res: Response): void => { res.send(`RESULT: ${minus(2, 2)}`); }); app.use('/multiple', (req: Request, res: Response): void => { res.send(`RESULT: ${multiple(12, 2)}`); }); app.use('/divide', (req: Request, res: Response): void => { res.send(`RESULT: ${divide(10, 2)}`); }); app.listen(PORT, (): void => { console.log('SERVER IS UP ON PORT:', PORT); });

注:テンプレートを @GITHUB_USERNAME/PACKAGE_NAME のように見せるために、@yuraabharian/math-lib リポジトリから math-lib をインポートしていることに注意してください。

ステップ 4:プロジェクトを実行するnpm start

 node-express-typescript % npm start > [email protected] start > npx tsc && node build/app.js SERVER IS UP ON PORT: 3001

ステップ 5 : ブラウザーに移動し、 http://localhost:3001/sumを開きます

これは機能するので、すべてのメソッドをテストしましょう。

• http://localhost:3001/multiple

• http://localhost:3001/マイナス

• http://localhost:3001/divide

概要:この記事では、最初のプライベート npm パッケージを作成してテストしました。記事を楽しんでいただければ幸いです。ご不明な点がございましたら、メール、LinkedIn、またはコメントでご連絡ください。幸運をお祈りしています