DNET_NpmPackagePublish

npmパッケージの開発と公開

• 戻る
  • npm
  • JavaScriptライブラリの作り方

概要

NuGet同様、npmにもパッケージを登録してみる。

詳細

npmアカウントを作成する。

• npm

サインアップ

https://npmjs.org/signup

以下をメモ。

• username
• password
• email address

npm adduser

• ターミナルからnpm adduserを実行

  > npm adduser
  Username: XXXXX
  Password: YYYYY
  Email: (this IS public) ZZZZZ@ZZZZZ
  

• ~/.npmrcにtoken情報が書き込まれ、

• npmモジュールを公開する準備が整う。

モジュールを実装する

package.json

モジュールの名前や、依存関係などを記載する（nspec的なファイル）。

#	プロパティ	説明
1	private	公開可否をtrue・falseで設定
2	name	重複禁止のモジュール名で英数小文字とハイフンだけ使用可能 （https://www.npmjs.com/package/:name）
3	version	n.n.n
4	main	このモジュールの主となるスクリプトファイル。 requireできるモジュールを作る場合は必須。
5	dependencies	依存npmモジュール

*.jsファイル

• モジュール実装方法（JavaScriptライブラリの作り方の該当節を参照）

• タイプ

  • ライブラリ的なモジュール：

    • index.js
    • indexは既定値ではなく、実際は、
      package.jsonのmainプロパティで指定したファイルを読む

  • サーバやコンソールのコード：

    • app.js
    • node appで起動する。

  • コマンドライン・ツール：
    以下が参考になる。

    • コマンドラインで動作する npm ライブラリを作る - Qiita
      https://qiita.com/star__hoshi/items/51c6cc719793abfb337d
    • Node で作るオレオレ CLI と npm への登録までの道のり - Qiita
      https://qiita.com/astronaughts/items/0ada9ad61a8956f647f0

  • gruntのplugin：

    • ...

*.d.tsファイル

• TypeScriptの型定義ファイル（TypeScriptの該当節を参照）

ライブラリとして公開し更新を行う。

npm publishで公開と更新を行う。

公開

• 個人スコープ or スコープなし

  npm publish
  

• 組織スコープ
  では既定値が、privateになるので。

  • private

    npm publish
    

  • public

    npm publish --access public
    

更新

npm publish

※ 公開と同じ。
　ただしversion番号は上げておく。

公開したライブラリを利用

require構文で利用

• require構文で利用（JavaScriptライブラリの作り方の該当節を参照）

https://github.com/OpenTouryoProject/SampleProgram/tree/master/PkgMgr/npm/ossc/console-app1

module構文(import)で利用

• module構文(import)で利用（JavaScriptライブラリの作り方の該当節を参照）

...

webpackで利用

• webpackで利用（JavaScriptライブラリの作り方の該当節を参照）

https://github.com/OpenTouryoProject/SampleProgram/tree/master/PkgMgr/npm/ossc/browser-app1

参考

• 自作の非公開npmモジュールの作成と共通ライブラリ化
  https://www.usagi1975.com/23feb172352/

• npm でコマンド登録するパッケージ作ってみた
  http://var.blog.jp/archives/70303113.html

Qiita

• 3分でできるnpmモジュール
  https://qiita.com/fnobi/items/f6b1574fb9f4518ed520

• grunt-pluginの作り方と解剖
  https://qiita.com/fnobi/items/5590e7e92b4f2bd81d04

• 初めてのnpm パッケージ公開
  https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2

• npmのorganizationアカウント運営
  https://qiita.com/zprodev/items/a257510899e7f13c0b56

left-pad

話題となった事もアリ（npmの該当節を参照）、既にdeprecatedだが、
ミニマムな実装事例として参考にできる。

• left-pad/left-pad: String left pad
  deprecated, use String​.prototype​.pad​Start()
  https://github.com/left-pad/left-pad

test-library1

ossc-test-library1

OSSコンソーシアム 開発基盤部で登録したテスト用ライブラリ

• SampleProgram/PkgMgr/npm/ossc at master · OpenTouryoProject/SampleProgram
  https://github.com/OpenTouryoProject/SampleProgram/tree/master/PkgMgr/npm/ossc

  • ossc-test-library1
  • console-app1
  • browser-app1

• ossc-test-library1 - npm
  https://www.npmjs.com/package/ossc-test-library1

touryo-test-library1

前述のライブラリを組織スコープの名前空間に対応させたもの。

• SampleProgram/PkgMgr/npm/touryo at master · OpenTouryoProject/SampleProgram
  https://github.com/OpenTouryoProject/SampleProgram/tree/master/PkgMgr/npm/touryo

  • touryo-test-library1
  • console-app1
  • browser-app1

• @touryo/test-library1 - npm
  https://www.npmjs.com/package/@touryo/test-library1

※ npmでは、名前空間対応させたライブラリをscoped packagesと言うらしい。

移行メモ

• 元 Wiki では見出しそのものが他ページへのリンクになっていた箇所 （「npmアカウントを作成する。」「*.jsファイル」の実装方法、 「require構文で利用」「module構文(import)で利用」「webpackで利用」）は、 GitHub Wiki では見出しからアンカが生成されるため、 見出しをプレーン・テキストとし、リンクは直下の本文に置いた。
• マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの NuGetパッケージの開発と公開 / TypeScript に張り替えた。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
• 元 Wiki の行頭空白によるプレフォーマット・ブロックは、 フェンス付きコードブロックにした。

---

Tags: 移行, npm, パッケージ公開, npm publish, package.json, scoped packages, left-pad, TypeScript