初めてnpmパッケージを作ってみて、わりといろいろやることがあったのでメモします。
ES2015のコードで開発して、babelでES5にコンパイルしています。
ここに動いているコードは置いてあります。 https://github.com/mookjp/multi-proxy
前提
babelを使って、以下のようなパッケージ構成でES2015でnpmモジュールを開発しているものとします。
.
├── dist # babelでコンパイルしたコードを配置
├── package.json
└── src # ES2015のコードを配置
├── main
│ ├── lib
│ ├── main.js
│ └── middleware
└── test
├── lib
└── middleware
パッケージの設定
package.json
"scripts"に、babel-cliを使ってES2015のコードをコンパイルする処理を追加します。
また、"main"にはコンパイル後のコードを指定します。
// 省略
"main": "dist/main.js", # babelでコンパイルしたコード
"scripts": {
// 省略
"build": "babel src/main -d dist" # dist以下に出力
},
"devDependencies": {
"babel-cli": "^6.3.17",
// 省略、テスト用パッケージ等
}
.gitignore
ES2015で開発しているモジュールなので、babelでコンパイルした後のコードはバージョン管理は不要だと思います。
.gitignoreにはbabelでコンパイルしたコードは含めないようにします。
// 省略
dist/
.npmignore
npm publishするとき、パッケージのルートディレクトリに
-
.npmignoreがない -
.gitignoreがある
場合は、.gitignoreで無視されているファイルがnpm publish時にも無視されます。
（参考: developers | npm Documentation）
今回は
- npmモジュールとしては
dist/以下にビルドしたES5のファイルを配布したい - 逆にgitリポジトリに含めているES2015のソースコードは無視したい
ので、以下のような.npmignoreを書きます。
// 省略
# dist/
src/ # ES2015のソースコードが配置されているディレクトリ
TravisCIの設定
.travis.yml
deployフェーズの設定をします。
以下の例ではTravisCIが標準で用意している、npmパッケージをデプロイできるproviderをそのまま使っています。
language: node_js
node_js:
- "4.1"
after_success:
- npm run-script build
deploy:
provider: npm
email: "mookjpy@gmail.com"
api_key: $NPM_API_KEY
skip_cleanup: true # `run-script build`で生成したES5のコードを消さないようにする
on:
tags: true
TravisCIのプロジェクト設定
TravisCIのプロジェクトごとの環境変数設定項目に、$NPM_API_KEYをあらかじめ設定しておきます。
プロジェクトの設定は https://travis-ci.org/your-username/project/ の、右側にsettingsというリンクがあるのでそこから行うことができます。
$NPM_API_KEYは自分のマシンでnpm loginした後に以下のコマンドから確認することができます。
cat ~/.npmrc
//registry.npmjs.org/:_authToken=<Your key>
babel6からのdefault exportの扱いについて
babel6からはexport defaultでexportしたモジュールにrequireでアクセスする際の挙動が変わっています。
以下のようにES2015のexport defaultを使った時は
export default myVar;
以下のようにrequireで取得したオブジェクトのdefaultを参照する必要があります。
// var myVar = require('myVar'); これはbabel6からは使えない
var myVar = require('myVar').default; // defaultオブジェクトを指定する
今回例にしているプロジェクトをbabel6を使ってコンパイルする際は、src/main/main.jsを以下のように書くことができます。
これはES5のコードなので、babelのコンパイラを通してもそのままdist/main.jsに書きだされます。
module.exports = require('./lib/my_util').default; // ユーザー側からrequireを使ってアクセスされるであろうモジュール
npmモジュールのユーザーは普段通りの感覚でrequireを使うことができます。
npm install great-package
var myUtil = require('great-package');