読者です 読者をやめる 読者になる 読者になる

Typescript,Gulp,browserify(それとRiot.js)あたりのメモ

最近ElectronアプリでTypescriptを使おうとして詰まったので備忘録. リニューアルしたありたそ画展のJavascriptは既に生まれたときから負債確定だったので,こちらもTypescriptにして書き直す予定.

それはお前の書き方が悪いからだ!とか,なんでTypescript?CoffeeScriptのほうよくない?とか言われそうだけど,なんとなくPythonの型アノテーションっぽくてTSのほうがすき.某やでなんとかには,ミーハー云々言われたけど気にしないでいきます.

tsconfig.json

基本的には,compilerOptionsを書いとくだけ.

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowJs": true
    }
}

ES6のPromiseとかそこら辺を使いたいのでtargetはes6を指定する.Riot.jsを使うのでallowJsも指定する.

gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');
var browserify = require('browserify');
var browserifyShim = require('browserify-shim');
var source = require('vinyl-source-stream');

var riot = require('gulp-riot');
var riotify = require('riotify')

gulp.task('compile:ts', function() {
    var tsconfig = require('./src/ts/tsconfig.json');
    return gulp.src(['./src/ts/*.ts'])
        .pipe(ts(tsconfig.compilerOptions))
        .pipe(gulp.dest('./src/js/'));
});

gulp.task('merge:js', function() {
    return browserify({
        entries: './src/js/app.js'
    })
    .external(['firebase'])
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./js/'));
});

gulp.task('compile:tag', function() {
    gulp.src('./src/tag/*.tag')
        .pipe(riot({
            type: 'typescript',
        }))
        .pipe(gulp.dest('./src/js/'));
});

gulp.task('merge:tag', function() {
    return browserify({
        entries: [
            './src/tag/gallery.tag',
            './src/tag/topbar.tag'
        ]
    }).transform([riotify])
    .bundle()
    .pipe(source('tags.js'))
    .pipe(gulp.dest('./js/'));
});

gulp.task('default', ['compile:ts', 'merge:js']);

browserify-shimを併用して,HTML内で<script src="http://hoge.js">なんてやったものをインポートしようとした時に,tsifyで一気にやろうとしたらいい感じにやってくれなかったので,コンパイルとマージのタスクを分けた.(ここでつまってだいぶ時間がかかった.)

もしかしたらpipeとかつないでやるとできるかもしれないけど,これで別段不便を感じてないからいいかな.

package.json

brwoserify-shimを利用するための設定を記述する.

{
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "riot": "global:riot",
    "lightgallery.js": "global:lightGallery",
  }
}

先述した,CDNからロードしてglobalに展開されたものをインポートできるようにする.そのため,globalで展開されている値を適切に指定しないとだめっぽい(?).左側に指定するほう("riot"とか"lightgallery.js")はdevDependenciesとしてインストールしたnodeモジュール名と同じにしないと,tsコンパイル時にモジュールが見つかんねー!って怒られる.

参考: mae.chab.in

tsファイル

import * as riot from 'riot';
import * as lightGallery from 'lightgerllery.js';

型定義というか,そもそもライブラリをインポートというか,そういうことしてるので,さっき言ったようにモジュール名に合わせる必要がある.

まとめ

端的に言って,しんどい.

npmの@typesモジュール使えよとか言われるかもしれないけど,ブラウザで使うのに結局browserify(とかWebpackとか)使わなきゃアレな感じがするのでbrowserify-shim使うことになって,さらにしんどくなる.

あとriot.jsのタグのマージタスクが遅い.そんな長くないファイル2つマージしただけで2秒とかかかる.なにかやり方が悪いのかも知らん.

ts書くときはVSCode使ってるけど,型定義ファイルから補完とか必要な値とか表示してくれるのは便利.最高.

ありたそ画展

リニューアルしました. ありたそ先生の今後のより一層の活躍をご期待下さい.

https://pps5.github.io/AlitasoFan/