【node.js】es6での開発で最低限必要な設定メモ〜npm・bower・gulp・grunt・browserify 色々あるけど。。。

node.js javascript

はじめに

javascriptで開発しているとnpm、bower、gulp、grunt、browserifyなどなど用語が多くて久々にやろうと思うとわからなくて気持ちが落ちる。
で、何もわからずネットで見つけた記事をコピペしてゆくとよくわからないものが一杯入っているというのも嫌。

やりたいことによって色々使いこなさなくてはならないのかもしれないが、自分がやりたいことで必要なものはそう多くなさそう。
なので、最低限必要なものだけ使う形で整理してメモ

とりあえずやりたいことはこんな程度　
・es6で開発してブラウザで見れるようにしたい　
・ファイルが更新されたら自動でビルドしたい

今回使うモジュール

> gulp、grunt
使わない。以前はファイル更新時に自動でビルドしたくて使っていた。
けど、npm-scripts(package.jsonのscriptsに書くやつ)を使ってwatchifyというツールを使えばできるみたいなのでこれを使う

> bower
なくても困らないのでとりあえず使わない

> browserify
使う。node.jsの形式で書いたコードをブラウザでも動くようにしてくれる。
requireとかはこれがないと動かないみたい　

> babelify
使う。es6形式で書いたコードをes6に対応していない環境でも動くようにしてくれる。

> watchify
使う。上でもでてきたけどファイルの更新を監視して差分だけbrowserifyビルドしてくれる

モジュールのインストール

npm install babelify watchify browserify babel-preset-es2015 --save

package.json編集

{
    "name": "sample_npm-scripts",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "watchify -v -t babelify src/index.js -o dist/index.js" ## ★これを追加
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "watchify": "^3.7.0",
        "browserify": "^13.1.0",
        "babelify": "^7.3.0",
        "babel-preset-es2015": "^6.14.0"
    }
}

.babelrc

{
  "presets": ["es2015"]
}

動作確認

スクリプト開始

$ npm run watch

node.jsのモジュールを作成して呼び出してみる

src/index.js

var myModule = require("./myModule"); // requireが使えるか(browserify)
import myModule2 from "./myModule2";  // importが使えるか (babelify)

var m = new myModule();
var m2 = new myModule2();

m.test();
m2.test();

src/myModule.js

module.exports = class myModule {
    test() {
        console.log("myModule is called.");
    }
};

src/myModule2.js

export default class myModule2 {
    test() {
        console.log("myModule2 is called.");
    }
}

index.html

<script src="./dist/index.js"></script>

dist/index.jsが作成されていればデバッグツールのコンソールに出力されるので確認できました

以上です