Zenn
📦

GitHub Packagesで社内用npmパッケージを配布して使ってみた

2020/12/10に公開
GitHub
JavaScript
TypeScript
npm
tech

この内容は、会社のブログに書こうと思ってガーッと書いてみたものの、あまり新規性がないのでやめたものです。捨てるのももったいないので、Zennに投稿してみます。

GitHub Packagesを使って社内用のnpmパッケージを配布し、それを実際にプロジェクトで使用するまでの流れをご紹介します。

パッケージ公開編

まず、https://github.com/st-tech/sample-private-npm-packageというリポジトリを作ります。ここにパッケージのソースを置きます。

新しくプロジェクトのディレクトリを作り、package.jsonを作ります。

{
  "name": "@st-tech/sample-private-npm-package",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kaido Iwamoto <kaido.iwamoto@zozo.com>",
  "license": "ISC"
}

ほぼnpm initで作られるボイラープレートのままですが、ポイントはパッケージ名にst-techのスコープがついているところです。
この際スコープは、GitHubのorg名と同じにする必要があります。

.gitignoreを書いておきます。

node_modules
.vscode
dist

せっかくなので、TypeScriptで書いてみましょう。また、Prettierも入れておきましょう。TypeScriptで書くのは、記事を傘増しするためです。

$ npm install -D typescript prettier

最小限のtsconfig.jsonを書きます。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

src/index.tsを書きます。長々と書いてもしょうがないので簡単な関数を1つだけ。

export function sayHello(name: string): void {
  console.log("Hello", name);
}

GitHub Package Registryにnpm CLIからログインします。ユーザー名とパスワードはGitHubのアカウントのものを使用します。ただし、GitHubに2段階認証が設定されている場合は、Personal Access Tokenと取得してそれを使用してください。

Personal Access Tokenの権限は、repo, read:packages, write:packages, delete:packagesにチェックを入れます。また、GitHubのorgがSSOを使用している場合はトークンのSSOを有効にします。

$ npm login --registry=https://npm.pkg.github.com

package.jsonを少し書き換えます。scriptsの追加と、publishConfigの追加です。

最終的なpackage.jsonはこのようになります。

{
  "name": "@st-tech/sample-private-npm-package",
  "version": "0.0.1",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "tsc"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/st-tech"
  },
  "author": "Kaido Iwamoto <kaido.iwamoto@zozo.com>",
  "license": "ISC",
  "devDependencies": {
    "prettier": "^2.1.1",
    "typescript": "^4.0.2"
  }
}

では、準備ができたのでパッケージを公開しましょう。

$ npm publish
 
> @st-tech/sample-private-npm-package@0.0.1 prepare .
> tsc
 
npm notice
npm notice 📦  @st-tech/sample-private-npm-package@0.0.1
npm notice === Tarball Contents ===
npm notice 193B dist/index.js 
npm notice 456B package.json  
npm notice 206B tsconfig.json 
npm notice 54B  dist/index.d.ts
npm notice 79B  src/index.ts  
npm notice === Tarball Details ===
npm notice name:          @st-tech/sample-private-npm-package    
npm notice version:       0.0.1                                  
npm notice package size:  735 B                                  
npm notice unpacked size: 988 B                                  
npm notice shasum:        d45c9f685399a4419fe10f5f4828dc95be2649c3
npm notice integrity:     sha512-w75wwY5EetBc0[...]kY/7DG3//+VoQ==
npm notice total files:   5                                      
npm notice
+ @st-tech/sample-private-npm-package@0.0.1

ちなみに、僕は普段はnpmではなくyarnを使っているのですが、GitHub Packagesへパッケージを公開する際はnpmを使っています。

GitHubのパッケージのページをみると、無事に公開されています。

次に、公開したパッケージを別のプロジェクトから利用してみましょう。

パッケージ利用編

適当にnpmのプロジェクトを作ります。package.jsonを作り、開発用のパッケージをいくつかインストールします。こちらでもTypeScriptを使います。tsconfig.jsonは先ほどのと同じもので問題ありません。

$ npm install -D prettier typescript ts-node

次に、プロジェクトのディレクトリに.npmrcを作成し、次のようにします。この設定を書くことで、@st-tech/が頭についたscoped packagesがGitHub Packagesからインストールされるようになります。

@st-tech:registry=https://npm.pkg.github.com

先ほど作成したパッケージをインストールします。

$ npm install @st-tech/sample-private-npm-package

最終的に、package.jsonはこのようになりました。

{
  "name": "iwamoto-sample-npm-project",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "prettier": "^2.1.2",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.2"
  },
  "dependencies": {
    "@st-tech/sample-private-npm-package": "0.0.1"
  }
}

最後に、src/index.tsを作成して次のようなコードを書きます。

import { sayHello } from "@st-tech/sample-private-npm-package";
 
const name = "Kaido Iwamoto";
sayHello(name);

これを実行すると、このように作成したパッケージのコードを呼び出すことができました。

$ ./node_modules/.bin/ts-node src/index.ts
 
Hello Kaido Iwamoto

Discussion