クロスプラットフォーム(Win、Mac)で使えるECMAScript開発環境 #JavaScript

以前投稿したシンプルだけどシッカリ働く最新のECMAScript開発環境ではクロスプラットフォームなnodeモジュールをいくつか使わせてもらいながらも、Windows環境では動かない構成になっていました。

素晴らしいモジュールたちをしっかり活かすべくWindows対応を行い、その際必要だった対応をまとめます。

対応前のpackage.json

package.json

{
  "private": true,
  "scripts": {
    "start": "npm run mkdist && npm run cpassets -- -w & npm run cphtml -- -w & webpack-dev-server",
    "build": "npm run mkdist && npm run cpassets && npm run cphtml && webpack --optimize-minimize",
    "mkdist": "rimraf dist/ && mkdirp dist/",
    "cpassets": "cpx 'assets/**/*' dist/",
    "cphtml": "cpx src/index.html dist/"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "cpx": "^1.5.0",
    "mkdirp": "^0.5.1",
    "rimraf": "^2.6.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.7.1"
  }
}

ダメだった箇所

npmスクリプト内のシングルクオーテーション

cpxでのディレクトリ内再帰的コピーが動きませんでした

Macではコレでいけてましたが

package.jsonより抜粋

"cpassets": "cpx 'assets/**/*' dist/",

Winではこうしないとダメでした

package.jsonより抜粋

"cpassets": "cpx \"assets/**/*\" dist/",

npmスクリプトではシングルクオーテーションでなくエスケープ付きダブルクオーテーションを使った方が良さそうです

npmスクリプトの並列実行

&を使用したnpmスクリプトの並列実行ができませんでした

コマンド	Mac	Windows
&	並列実行	エラー無視の直列実行
&&	直列実行	直列実行

npmスクリプトを直列・並列実行させるためのクロスプラットフォームなモジュールnpm-run-allを導入し

並列実行を使用しているstartをこのように書き換えました

Before

package.jsonより抜粋

"start": "npm run mkdist && npm run cpassets -- -w & npm run cphtml -- -w & webpack-dev-server",

After

package.jsonより抜粋

"start": "npm-run-all mkdist --parallel \"cpassets -- -w\" \"cphtml -- -w\" webpack-dev",
"webpack-dev": "webpack-dev-server"

mkdistを実行後、cpassets -- -w cphtml -- -w webpack-devを並列実行させています

npm-run-allはオプション無しだと直列実行ですが、オプションを指定すると並列/直列を組み合わせることができます
並列 : --parallel <tasks>
直列 : --serial <tasks>

対応後のpackage.json

package.json

{
  "private": true,
  "scripts": {
    "start": "npm-run-all mkdist --parallel \"cpassets -- -w\" \"cphtml -- -w\" webpack-dev",
    "build": "npm-run-all mkdist cpassets cphtml webpack",
    "mkdist": "rimraf dist/ && mkdirp dist/",
    "cpassets": "cpx \"assets/**/*\" dist/",
    "cphtml": "cpx src/index.html dist/",
    "webpack": "webpack --optimize-minimize",
    "webpack-dev": "webpack-dev-server"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "cpx": "^1.5.0",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.1.2",
    "rimraf": "^2.6.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.7.1"
  }
}

まとめ

クロスプラットフォーム対応の便利なモジュールを使う

コマンド差分が辛いので、クロスプラットフォームに対応しているモジュールを使いましょう

cpx : ファイルコピーをサポート&監視
mkdirp : ディレクトリ作成をサポート
rimraf : ディレクトリ削除をサポート
npm-run-all : npmスクリプトの並列実行をサポート

npmスクリプト内ではシングルクオーテーションを使わない

エスケープ付きダブルクオーテーションを使いましょう

パスの指定にはNodeAPIのpathを使う

今回は対応不要でしたが、ファイルパス系はMacとWindowsで以下のように異なります

Mac

const indexPath = './src/index.js';

Windows

const indexPath = '.\\src\\index.js';

これはNodeAPIのpathを使用することで、下記に統一することができます

const path = require('path');

const indexPath = path.resolve('src', 'index.js');

さいごに

対応後の環境はこちらにあるので、よかったら試してみてください。