Node.jsのツール周りのメモ

概要

Node.js + Gulp + Typescript + Babel で、プログラミング環境構築した時のメモです。

Node.js

Node.js

ウェブブラウザChromeのV8 JavaScriptエンジンで動作するJavascript環境です。
MacでのインストールはHomebrewを使います。

$ brew install node

npm

Node.jsのパッケージ管理ツールです。

$ npm init                                            # package.jsonを生成
$ npm install hogehoge --save         # 依存モジュールをインストール。
$ npm install hogehoge --save-dev # 開発時の依存モジュールをインストール。

gulp

gulp.js

タスクランナーツールです。
scssやaltJSの変換処理などを処理します。

$ npm install gulp-cli -g
$ npm install gulp --save-dev
$ npm install gulp-babel --save-dev
$ npm install gulp-typescript --save-dev
$ npm install gulp-uglify --save-dev

変換処理を記述するファイルgulpfile.jsを作成します。

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var babel = require("gulp-babel");
var ts = require("gulp-typescript");

var tsProject = ts.createProject("tsconfig.json", function() {
    typescript: require("typescript")
});

gulp.task("ts", function() {
    tsProject.src("src/*.ts")
        .pipe(ts(tsProject))
        .pipe(babel())
        .pipe(uglify({output: {comments: 'some'}}))
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", function() {
    gulp.watch('src/*.ts', ['ts'])
});

gulp.task('default', ['ts', 'watch']);

Typescript

TypeScript - JavaScript that scales.

Microsoft製のaltJsです。
Javascriptに型をつけることができます。
ES5やES6に変換できます。

$ npm install typescript --save-dev

tsconfig.json でコンパイルオプションを設定します。

{
    "include": [
        "src/**/*"
    ],
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/tyeps/*"
            ]
        },
        "sourceMap": true
    },
    "exclude": [
        "node_modules",
        "**/*.spce.ts"
    ]
}

babel

Babel · The compiler for writing next generation JavaScript

ES6からES5に変換するツールです。

npm install --save-dev babel babel-core babel-preset-es2015

.babelrcでコンパイルオプションを設定します。

{
    "presets": [
        "es2015"
    ]
}