LoginSignup
2
1

More than 5 years have passed since last update.

TypeScriptのnpmモジュールをリリースしてみよう(2018/03/15時点)

Posted at

npmとは

Node Package Managerの略称
Node.jsのパッケージ(Package )を管理する(Manager)ツールのこと。
パッケージとは予め用意されたnode.js製のライブラリのことを指す。
Node.jsとはイベント化された入出力を扱うUnix系プラットホーム上のサーバサイドJavaScript環境をさす(V8 JavaScriptエンジンで動作する)。

TypeScriptとは

そもそもJavaScriptはwebブラウザ上で動的なウェブサイトの構築に扱われた。
TypeScriptはJavaScriptに静的型付けとクラスベースのオブジェクト指向を加えたMicroSoft社発のスクリプト言語。
既存のJavaScriptのコードはTypeScriptとしても実行可能。
TypeScript自体はコンパイラでJavaScriptに変換される。型推論や文脈的型付けなど、JavaScriptよりもある程度制約がある。
https://ja.wikipedia.org/wiki/TypeScript

チュートリアル

Node.jsをインストール
gitに関する設定がなされていることが前提

インストール

$ git clone git://github.com/creationix/nvm.git ~/.nvm

~/.bashrc or ~/.bash_profileのどちらかに下記を追加

if [[ -s ~/.nvm/nvm.sh ]] ; then
    source ~/.nvm/nvm.sh ;
fi

インストール可能なバージョンを表示

$ nvm ls-remote

インストール

$ nvm install v6.11.2

インストールされているバージョンの一覧表示

$ nvm ls

バージョンの切り替え

$ nvm use v6.11.2

コマンドの確認

$ node -v

Node.jsでHello world
適当に下記のようなJavaScriptファイルを作る

console.log('Hello World!');

実行

$ node test.js
Hello World!

npmに登録

下記サイトに登録
https://npmjs.org/signup

username, password, email_addressはメモしておく

下記コマンド実行し、username, password, email_addressを記録しておく

$ npm adduser

モジュールを実装
適当なディレクトリを作成し、npm initを実行

$ cd my-module/
$ npm init -y

package.jsonの中身を編集

{
  "name": "{package名}",
  "version": "1.0.0",
  "description": "Test project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "{自分の名前}",
  "license": "ISC"
}

index.jsの中身を編集

function Hello() {
    return 'Hello ';
}

exports.Hello = Hello;

最終的にファイル構成はこうなるはず

.
├── index.js
└── package.json

リリース&確認

下記コマンドでリリースされるはず

$ npm publish

自分のプロフィールにpublishされたモジュールが掲載されている

TypeScriptでnpmモジュールを作りたい

typescript  を入れてtscコマンドを実行
npm install typescript -D
npm install typescript -g -D
npm install typings -g -D
tsc --init

参考文献

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1