npm run scripts

このエントリではコマンドラインから npm run ... で起動する npm run-scripts について説明します。

なお、このエントリでは、以下のディレクトリ構成になっていることを前提に説明します。異なる場合は随時読み替えを行ってください。
詳しくは、チュートリアル環境を参照してください。

$ 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",
    "wiki":     "node ../WebModule/run/wiki.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 lint",
    "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 test/node/index.js",
    "noded":    "NODE_ENV=production NODE_PATH=lib node --debug-brk test/node/index.js",
    "browser":  "open http://localhost:8000/AppAppApp/test/browser/index.html",
    "el":       "electron test/el",
    "add-src":  "node ../WebModule/run/add-src.js",
    "sim":      "node ../WebModule/run/sim.js http://localhost:8000/AppAppApp/test/browser/index.html",
    "simx":     "node ../WebModule/run/sim.js stop",
    "lint":     "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

node ../WebModule/run/setup

GitHub で作成したばかりのリポジトリは空っぽの状態です。
node ../WebModule/run/setup コマンドで WebModule の開発環境をセットアップする必要があります。
チュートリアル環境も参照してください。

$ 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/package.json
>   exists:    ~/workspace/MyExample.js/README.md - overwrite it? (y/n): y
>   overwrite: ~/workspace/MyExample.js/README.md
>
>   done.
>
>   You can be next actions.
>   `$ npm run`        # Dump all WebModule commands
>   `$ npm start`      # Start local http server
>   `$ npm run sync`   # Update npm modules
>   `$ npm t`          # Minify and Test

node ../WebModule/run/setup コマンドは…

~/workspace/WebModue/* と ~/workspace/MyExample.js/* を同期します
- 変更されているファイルがあれば overwrite it? (y/n) を表示し入力を待ちます
- y で上書きします
- n や enter なら上書きせずスルーします
MyExample.js/package.json の scripts が追加/更新され npm run ... コマンドが使える状態になります
- npm run setup, npm start, npm t コマンドが利用可能になります
WebModule で行われた更新を MyExample.js に取り込む事ができます
- 以下のコマンドを実行することで、必要な更新を MyExample.js に取り込む事ができます
- ~/workspace/WebModule を git pull で更新します
- ~/workspace/MyExample.js で npm run setup コマンドを実行します
モジュールのセットアップをやり直す事ができます
- 全てやり直す場合は npm run setup を再度実行し、全ての選択肢に y をタイプしてください

npm run setup

npm run setup コマンドは、node ../WebModue/run/setup を実行します。

npm run sync

npm run sync コマンドは、開発環境のスキャンを行い、必要なファイルの生成やマイグレーションを行います。

WebModule/BASE_MODEL/package.json と MyExample.js/package.json の内容の同期を行います
- package.json のフォーマットチェックを行い、更新と整形を行います
  - package.json が古いフォーマットで書かれている場合はマイグレーションを行います
- package.json の scripts を個別に更新します
  - コマンド名が衝突した場合は、新しいコマンドを別名(コマンド名 + WebModuleのバージョン名)で追加します。
DEPRECATED なソースコードが存在しないかチェックを行い、改修のためのヒントを提示します。
- lib/{モジュール名}.js
- test/testcode.js
npm update を行い、外部の依存モジュールをローカルにインストールします
npm run page コマンドを実行し、テストに必要なファイル(test/*.html や test/*.js)の作成と更新を行います

$ npm run sync

>   uupaa.myexample.js@0.0.0 sync ~/workspace/MyExample.js
>   node ../WebModule/run/sync.js; npm update; node ../WebModule/run/page.js
>
>   - repositoryFullName:  MyExample.js
>   - repositoryName:      MyExample
>   - copy source dir:     ~/workspace/WebModule/
>   - copy target dir:     ~/workspace/MyExample.js/
>   - source package.json: ~/workspace/WebModule/BASE_MODEL/package.json
>   - target package.json: ~/workspace/MyExample.js/package.json
>
>   done.
>
> uupaa.hash.js@0.0.11 node_modules/uupaa.hash.js

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

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

package.json の dependencies や devDependencies に様々な変更を加えると、次第に node_modules 以下が汚れていきます。
また npm update 中にネットワークエラーなどで不完全なファイルコピーが行われる事があります。
そのような状態で npm update や npm run sync を行うと更新に失敗する事があります。

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

npm start

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

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

Video や Audio の再生テストは、SimpleHTTPServer では上手く行きません。 nginx を使用してください。

$ 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 lint コマンドを起動します。

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

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/*/index.html や test/*/index.js ファイルを生成します。

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

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

__MODULES__     <-- 依存する外部モジュールの一覧 (package.json の dependencies に記述されたモジュールのソースコード一覧)
__WMTOOLS__     <-- wmtools.js
__SOURCES__     <-- モジュールのソースコード一覧 (package.json の webmodule/{browser|worker|node|nw|el}/source)
__OUTPUT__      <-- 出力先                       (package.json の webmodule/{browser|worker|node|nw|el}/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 test のシノニムです。

npm run test

npm run test コマンドは 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/browser/index.html と test/browser/worker.js のテストを実行します。

npm run el

npm run el コマンドは Electron を起動し test/el/index.html のテストを実行します。

npm run sim

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

npm run simx

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

npm run lint

npm run lint コマンドは 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

Semver を参照してください。

Overview
- ChangeLog
- ModuleList
- Overview
  - Zen
  - Slide
- Workflow
  - Install
  - Setup
  - Enviromnet
  - npm run ...
  - Migration
- Debug
  - node-inspector
- Idiom and Pattern
  - Idiom
    - Environment Detection
  - Pattern
    - Validate
    - SwitchModule
- import(module)
- WebModule.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly