Skip to content

npm run scripts

Jump to bottom Edit New page
uupaa edited this page May 25, 2015 · 26 revisions

このエントリではコマンドラインから起動する npm run-script について説明します。
なお、以下のディレクトリ構成になっていることを前提に説明します。異なる場合は随時読み替えを行ってください。

$ tree -d

~/workspace
    ├── MyExample.js    <-- 現在開発中のモジュール
    └── WebModule
           ├...
           └...

run-scripts

node ../WebModule/run/setup を実行すると、package.json に以下の run-scripts(コマンド) が追加されます。

これらはコマンドラインから npm run {コマンド名} で実行可能です。

  "scripts": {
    "sync":     "node ../WebModule/run/sync.js; npm update; node ../WebModule/run/page.js",
    "min":      "node ../WebModule/run/minify.js --verbose --strict --keep --pretty",
    "build":    "node ../WebModule/run/minify.js --verbose --strict --keep --release",
    "watch":    "node ../WebModule/run/watch.js --verbose --run hint",
    "page":     "node ../WebModule/run/page.js --verbose",
    "test":     "npm run min; npm run node; npm run browser",
    "node":     "NODE_ENV=production NODE_PATH=lib node --harmony test/node.js",
    "noded":    "NODE_ENV=production NODE_PATH=lib node --debug-brk --harmony test/node.js",
    "browser":  "open http://localhost:8000/MyExample.js/test/index.html",
    "sim":      "node ../WebModule/run/sim.js http://localhost:8000/MyExample.js/test/index.html",
    "simx":     "node ../WebModule/run/sim.js stop",
    "hint":     "eslint lib/*.js",
    "score":    "node ../WebModule/run/score.js; open lint/plato/index.html",
    "patch":    "node ../WebModule/run/patch.js",
    "setup":    "node ../WebModule/run/setup.js",
    "start":    "cd ../; Python -m SimpleHTTPServer 8000 &",
    "stop":     "killall -- Python -m SimpleHTTPServer 8000; exit 0"
  }

一部のコマンドは、より短いコマンドで起動できます。

  • npm run start -> npm start
  • npm run stop -> npm stop
  • npm run test -> npm test -> npm t

最新の run script 一覧 も参照してください。
最新の run script を現在のモジュール開発環境に取り込むには以下のコマンドを実行してください。

// WebModule を更新

$ cd ~/workspace/WebModule
$ git pull


// 更新を開発環境に反映する

$ cd ~/workspace/MyExample.js   (または現在開発中のモジュールのディレクトリ)
$ npm run setup
$ npm run sync

npm run setup

GitHub で作成し、ローカルに clone した環境は開発ができない状態(空っぽの状態)です。

npm run setup コマンドは ~/workspace/WebModue/ 以下のファイルと ~/workspace/MyExample.js/ 以下のファイルを比較し、必要に応じて補完と上書きを行います。

  • 不足しているファイルがあれば補完します
  • 変更されているファイルがあれば overwrite it? (y/n) を表示し入力を待ちます。 y をタイプすると上書きします。

このコマンドは何度でも実行が可能で、モジュールのセットアップをやり直す事もできます。

~/workspace/WebModule を git pull で更新した後に MyExample.js に移動し npm run setup コマンドを実行すると、WebModule の更新を MyExample.js に反映することができます。

$ cd ~/workspace/MyExample.js

$ node ../WebModule/run/setup

>   - repositoryFullName: MyExample.js
>   - repositoryName:     MyExample
>   - copy source dir:    ~/workspace/WebModule/
>   - copy target dir:    ~/workspace/MyExample.js/
>
>   clone:     ~/workspace/MyExample.js/lint/plato/README.md
>   clone:     ~/workspace/MyExample.js/release/README.md
>   clone:     ~/workspace/MyExample.js/.gitignore
>   clone:     ~/workspace/MyExample.js/.jshintrc
>   clone:     ~/workspace/MyExample.js/.npmignore
>   clone:     ~/workspace/MyExample.js/.travis.yml
>   clone:     ~/workspace/MyExample.js/index.js
>   clone:     ~/workspace/MyExample.js/lib/MyExample.js
>   clone:     ~/workspace/MyExample.js/test/testcase.js
>   clone:     ~/workspace/MyExample.js/test/template/
>                                       :
>                                       :
>   clone:     ~/workspace/MyExample.js/package.json
>   exists:    ~/workspace/MyExample.js/README.md - overwrite it? (y/n): y
>   overwrite: ~/workspace/MyExample.js/README.md
>
>   done.
>
>   Available next actions,
>   `$ npm run`        # dump WebModule commands
>   `$ npm start`      # start local httpd server
>   `$ npm run sync`   # sync scripts, install/update node modules, create test pages and minify
>   `$ npm t`          # do test

npm run sync

npm run sync コマンドは、モジュールの開発が進められるように様々なファイルの状態を検査し、必要に応じて環境を整えます。

  • WebModule/MODULE_package.json と MyExample.js/package.json の内容の同期を行います

    • package.json のフォーマットチェックを行い、更新と整形を行います
      • package.json が古いフォーマットで書かれている場合はマイグレーションを行います
    • package.json の scripts を個別に更新します
      • 同じ名前で内容が異なるコマンドが MyExample.js 側に既に存在する場合は、元からあったコマンドを維持したまま、新しいコマンドを別の名前(コマンド名 + WebModuleのバージョン名)で追加します。

  • DEPRECATED なソースコードが存在しないかチェックを行い、改修のためのヒントを提示します。

    • lib/{モジュール名}.js
    • test/testcode.js

  • npm update を行い、外部の依存モジュールをローカルにインストールします

  • npm run page コマンドを実行し、テストに必要なファイル(test/*.html や test/*.js)の作成と更新を行います

$ npm run sync

>   [email protected] sync /Users/obara.takao/workspace/MyExample.js
>   node ../WebModule/run/sync.js; npm update; node ../WebModule/run/page.js
>
>   - repositoryFullName:  MyExample.js
>   - repositoryName:      MyExample
>   - copy source dir:     /Users/obara.takao/workspace/WebModule/
>   - copy target dir:     /Users/obara.takao/workspace/MyExample.js/
>   - source package.json: /Users/obara.takao/workspace/WebModule/MODULE_package.json
>   - target package.json: /Users/obara.takao/workspace/MyExample.js/package.json
>
>   done.
>
> [email protected] node_modules/uupaa.hash.js

package.json を手動で更新した場合は、その都度 npm run sync を実行してください

依存関係のエラーから回復する

package.json の dependencies や devDependencies に様々な変更を加えると、次第に node_modules 以下が汚れていきます。
そのような状態で npm update や npm run sync を行うと更新に失敗する場合があります。

このような問題が発生した場合は rm -rf node_modules を実行し、その後で npm run sync を実行してください

npm start

npm start コマンドは簡易httpサーバを起動します。ポートは 8000 です。
http://localhost:8000/{モジュール名}.js/test/index.html でモジュールのテストページにアクセスできます。

サーバを起動した状態で npm t コマンドを実行すると、node.js やブラウザ上でテストが走ります。

$ npm start

> Python -m SimpleHTTPServer 8000

npm stop

npm stop コマンドは簡易httpサーバを終了します。

$ npm stop

npm run min

npm run min コマンドはデバッグ用に lib/*.js を minify し、release/*.min.js を生成します。

npm run min コマンドが生成する *.min.js には、依存する外部モジュールのコードは同梱されていません。
外部モジュールも一緒にビルドするには npm run build を使います。

npm run build

npm run build コマンドはリリース用のビルドを行います。 lib/*.js と依存関係にあるモジュールのソースコードを取り込んだ形でビルドを行い、release/*.min.js を生成します。
依存関係にあるモジュールの情報は dependencies から取得します。

npm run build で生成した release/*.min.js は、ほぼ単体で動作が可能なようにビルドされています。

<script src="../lib/WebModuleGlobal.js"></script>
<script src="../release/MyExample.b.min.js"></script>

npm run watch

npm run watch コマンドは、lib/*.js に対する変更を監視し、コマンドの --run で指定されたコマンドを実行します。

デフォルトの設定では、npm run watch コマンドは、npm run hint コマンドを起動します。

    "watch":    "node ../WebModule/run/watch.js --verbose --run hint",

watch で他のコマンドを実行するには、以下のように変更してください

    "watch":    "node ../WebModule/run/watch.js --verbose --run min",               <-- npm run min コマンドを実行する

    "watch":    "node ../WebModule/run/watch.js --verbose --command {コマンド}",    <-- 任意の shell コマンドを実行する

npm run page

npm run page コマンドは test/template/* ファイルを元に test/*.html や test/*.js ファイルを生成します。

test/*.html や test/*.js ファイルは test/template ファイルを元に上書きします。消してほしくない情報があれば template 側に記述してください。

template ファイルに記述した以下のキーワードは、 npm run page コマンド実行時に展開します。

__MODULES__     <-- 依存する外部モジュールの一覧 (package.json の dependencies に記述されたモジュールのソースコード一覧)
__WMTOOLS__     <-- wmtools.js
__SOURCES__     <-- モジュールのソースコード一覧 (package.json の webmodule/{browser|worker|node|nw}/source)
__OUTPUT__      <-- 出力先                       (package.json の webmodule/{browser|worker|node|nw}/output)
__TEST_CASE__   <-- test/testcase.js

展開後はこのようになります。

<script src="../node_modules/uupaa.typedarray.js/lib/TypedArray.js"></script>
<script src="../node_modules/uupaa.random.js/lib/Random.js"></script>
<script src="../node_modules/uupaa.hash.js/lib/Hash.js"></script>
<script src="wmtools.js"></script>
<script src="../lib/MyExample.js"></script>
<script src="../release/MyExample.b.min.js"></script>
<script src="testcase.js"></script>

npm t

npm t コマンドは npm run min npm run node npm run browser コマンドを実行します。

npm run node

npm run node コマンドは node.js 上で test/node.js のテストを実行します。

npm run noded

npm run noded コマンドは test/node.js を使ったテストを --debug-brk オブション付きで実行します。

このコマンドを使うと、node.js で動作するコードを、Chromium の DevTools を使いながら変数のwatchをしたりブレークポイントで止めながらデバッグできます。

詳しくはこちらのエントリを参照してください。

npm run browser

npm run browser コマンドは ブラウザを起動し test/index.html と test/worker.js のテストを実行します。

npm run sim

npm run sim コマンドは iOS Simulator を起動し test/index.html と test/worker.js のテストを実行します。

npm run simx

npm run simx コマンドは npm run sim コマンドにより起動している iOS Simulator のインスタンスを終了します。

npm run hint

npm run hint コマンドは eslint lib/*.js を実行し結果を画面に表示します。

npm run score

npm run score コマンドはカバレッジツール(plato)を実行し、lib/*.js の静的解析を行った結果を点数化しブラウザに表示します。

npm run patch

npm run patch コマンドは package.json の version プロパティの末尾の番号(パッチバージョン)を +1 します。

> node ../WebModule/run/patch.js

update patch version. 0.0.10 -> 0.0.11

このような version x.y.z のような3桁のバージョン表記は Semver と呼ばれています。

  • x がメジャーバージョン, y がマイナーバージョン, z がパッチバージョンです。
  • 大幅で破壊的な変更を行い、互換性がなくなる修正をしてしまった場合は、x を +1 します。
  • それほどインパクトがない機能の追加や修正を行った場合は場合は、y を +1 します。
  • バグフィックスなど軽微な修正を行った場合は、z を +1 します。
  • package.json の version を上げずに npm publish を繰り返すと publish 時にエラーになります。
Add a custom footer
Clone this wiki locally