これはなに？
npmパッケージを公開したので、感想だったりメモだったり
やった理由
業務でパッケージをインストールしたときに、いつもなんとなく叩いてるけど、公開する側ってどんな感じなんだろうと思い
そもそもnpmって？
Node.jsには、プログラムのかたまりをパッケージという単位にまとめて配布されている
パッケージの検索やインストール、バージョンなどを管理できるのがnpm
作った物
呼び出すと hello の文字列が返される使い道に困るもの
作業工程
npmのアカウントを作る
npm adduser
上記のコマンド叩いて吐き出されたURLにアクセスして、アカウント作成
その後は勝手にログインされてた
モジュールを作成する
githubに上げておけばよかった。。。
初期設定
$ mkdir npm-package-pagination // デフォルトのパッケージ名になる
$ npm init --scope=t_raku // 後述
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (@t_raku/npm-package-hello) // scopeをつけたことで@t_raku/ディレクトリ名になっている
version: (1.0.0) 0.1.0 // バージョンは変更、詳細は後述
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: t_raku
license: (ISC) MIT // 後述
About to write to /Users/raku/repos/npm-package-hello/package.json:
{
"name": "@t_raku/npm-package-hello",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "t_raku",
"license": "MIT"
}
- scope
- パッケージ名が汎用的だと、既存に存在しているパッケージとぶつかって公開できない可能性があるからつけた方が良さそう
- version
- セマンティックバージョニングなるものに従う必要があるらしい
- 自分はメジャー、マイナー、パッチくらいしかわからない。。。
- 簡単に言うと破壊的なアップデートを行う時はメジャーバージョンを上げる必要があり、12.n.mみたいにバージョンがすごいことになる
- メジャーバージョンが0だと破壊的なアップデートいいらしい？
- license
- OSSライセンス
- ほとんど理解できてないから詳しい人いたら聞きたみ
モジュールを実装
Hello.ts
export const hello = (): string => 'hello'
index.ts
export * from './Hello'
TypeScriptを入れる
$ npm install typescript
added 1 package, and audited 2 packages in 2s
found 0 vulnerabilities
$ npx tsc --init // 初期化
Created a new tsconfig.json with:
TS
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
You can learn more at https://aka.ms/tsconfig
tsconfigに追記
tsconfig.json
{
"compilerOptions": {
"declaration": true,
"sourceMap": true,
"outDir": "./dist",
},
"include": ["src/**/*.ts"]
}
コンパイル
$ npx tsc
$ ls dist
Hello.d.ts Hello.js Hello.js.map index.d.ts index.js index.js.map
公開準備
.npmignoreの作成
利用するのはdist配下なので、srcなどは不要
.npmignore
/node_modules
/src
tsconfig.json
package.jsonの修正
package.json
{
"name": "@t_raku/npm-package-hello",
"version": "0.1.0",
"description": "",
"main": "dist/index.ts", // 修正
"types": "dist/index.d.ts", // 追加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc", // 追加
"pr
epare": "npm run build" // 追加
},
"author": "t_raku",
"license": "MIT",
"dependencies": {
"typescript": "^5.2.2"
}
}
公開
下記のコマンドを叩く
npm publish --access=public
スコープを設定している場合 --accessオプションが必要らしい（そのうち詳しく調べる）
使ってみる(ここからは書く必要ないかもだけど)
TSが動く環境を作る
公開したパッケージをインストール
コンソールに表示する処理を書く
app.ts
import { hello } from "@t_raku/npm-package-hello";
console.log(hello())
実行してみる
でけた
おまけ
公開したタイミングでページが作られるらしい
https://www.npmjs.com/package/@t_raku/npm-package-hello
感想
- 大した機能ではないけど思ったよりスムーズに公開できて驚いている
- パッケージの中で別パッケージ使うとかだと少し大変そう
- 今回はパッケージの公開までを主にしていたので、次は普通に使えそうな物を作ってみる
- なんとなく公開した状態なので全てを理解しきれてない感
- バージョンやライセンスとかも少し身につけた方が良いのかなと思った
- githubのリポジトリに上げよう（そのうち）