概要
Node.js + Gulp + Typescript + Babel で、プログラミング環境構築した時のメモです。
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
タスクランナーツールです。
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" ] }