React Componentをnpmに公開した

Embedly api を使ってembedするreact-embedlyというReact Componentを作ったので、
React Componentとしてnpmに公開しました。
https://www.npmjs.com/package/react-embedly
http://react-components.com/component/react-embedly
Github

React Componentをnpmに公開して、react-components.comに表示すること自体は特に難しいことはなかったですが、
これまでnpmで公開されているモジュールを使うだけで、自分で書く必要がなかったpackage.jsonの書き方について知ることができたのが1番の学びでした。以下npmにReact Componentを公開した際のpackage.json周りの備忘録。

npmに公開する

何はともあれnpmに公開する必要があります。以下がnpmに公開・変更するためのコマンド。

npm publish

この時、package.jsonに書かれている情報がnpmに公開されます。今回npmに公開したpackage.jsonは以下。

{
    "name": "react-embedly",
    "version": "0.3.5",
    "description": "A React component to embed web pages by Embedly api",
    "main": "./lib/index.js",
    "scripts": {
        test: "echo "Error: no test specified" && exit 1",
        build: "babel src --out-dir lib",
        example: "webpack"
    },
    "keywords": [
        "react-component",
        "react",
        "embed",
        "embedly"
    ],
    "files":[
        "lib"
    ],
    "repository": {
        type: "git",
        url: "https://github.com/OsukeUesugi/react-embedly.git"
    },
    "author": "osuke",
    "license": "MIT",
    "devDependencies": {
        babel-core: "^6.8.0",
        babel-loader: "^6.2.4",
        babel-preset-es2015: "^6.6.0",
        babel-preset-react: "^6.5.0",
        babel-preset-stage-0: "^6.5.0",
        react: "^15.0.2",
        react-dom: "^15.0.2",
        webpack: "^1.13.0"
    },
    "dependencies": {
        superagent: "^1.8.3"
    },
    "bugs": {
        url: "https://github.com/OsukeUesugi/react-embedly/issues"
    },
    "homepage": "https://github.com/OsukeUesugi/react-embedly"
}

name

モジュール名。必須。npmで公開されている他のモジュールとかぶらないユニークなものでなければならない。

version

バージョン。必須。既に公開しているモジュールを変更したい場合、
このバージョンの数値を変更する必要があります。

description

モジュールの説明。

main

このモジュールを使用する時にrequireするファイルを指定します。
今回のモジュールの場合、/srcディレクトリのindex.jsxをBabelでトランスパイルして/libディレクトリにindex.jsを生成しています。
今回のモジュールを使用するには/lib/index.jsをrequireする必要があるのでこれを指定しています。

scripts

ここには、このモジュールを開発するときに使うコマンド等を書くことができます。
例えば、トランスパイルするコマンドや、テストのコマンドなど。
今回の場合だと、

npm run build

とすると、以下のコマンドが実行されます。

babel src --out-dir lib

keywords

npm searchコマンドでの検索用キーワードを指定することができます。

files

npmに公開するファイルやディレクトリを指定することができます。
このとき、package.jsonやREADME.md、CHANGELOG.md、LICENSEファイルは公開されます。

repository

リポジトリの情報を指定することができます。

author

authorの情報を入力することができます。
複数人いる場合はauthorの代わりにcontributorsとして指定することができます。

license

どのライセンスで公開しているのか指定することができます。

dependencies

このモジュールが依存しているモジュールを指定することができます。

devDependencies

このモジュールを使用する際に必要のないモジュールを指定することができます。
例えば、このモジュールを開発する際に使用しているBabelとか、テストフレームワークのようなモジュール。

bugs

issueトラッカーのURLやメールアドレスなどを指定することができます。

homepage

このモジュールに関するページのURLを指定することができます。

ということが詳しく本家に書かれています、https://docs.npmjs.com/files/package.json

react-components.com に表示する

react-components.comに表示するにはpackage.jsonのkeywordsに「react-component」を指定するだけです。

 
 
以上。package.jsonについて理解する機会になって良かった。