詰まったところ

watchモードが、一度目の保存にしか対応しない

ファイル保存を検知してビルドを行うwatchモードですが、起動後一度目に対してしかビルドが走りませんでした。

これは多くのIDEやテキストエディタで採用しているsafe_writeというものが原因らしく、公式ドキュメントには「safe_writeを切って使って下さい」と書いてありました。

🔥 Hot Module Replacement

なんでや……webpackは普通に動いてたやん……。

ビルドツールのためにチームメンバーのIDEの設定を変えるというのはあまり良くないと思ったので、この問題はgulpを入れることで解決しました。が、入れるにも少し詰まりました。

gulp-parcelが動かない

GitHub - zacky1972/gulp-parcel: Command line compilation plugin for gulp.js

"gulp parcel"と検索するとすぐに出てくる上記のライブラリですが、この記事を書いている日（2018/11/07）の時点では最終コミットが2018/2/23と保守はされていないようで、自分の環境ではサンプルのままでもエラーが出て動きませんでした。gulpかParcelかのバージョンがあっていないのかなーと思いましたが、検証はしていません。

今回はファイルの変更を検知してビルドを行うだけで良かったので、コマンドを直で叩くことで解決しました。

const gulp = require("gulp");
const execSync = require('child_process').execSync;

gulp.task("build", function() {
  console.log(
    execSync("npx parcel build src/index.tsx -o dist/main.js --no-source-maps --no-minify").toString()
  );
});

gulp.task("watch", function() {
  gulp.start('build')
  var targets = [
    './src/**/*',
  ];
  gulp.watch(targets, ['build']);
});

Typescriptのトランスパイル時にエラーを吐かない

検証を進めていくと、トランスパイル時に型違いなどで本来エラーが出てほしい時に何も出ないという挙動がありました。

string型に数字を入れたり、number型に文字列を入れたりしようとするコードがあったとします。

const hoge: string = 1;
const fuga: number = "aaaaa"
console.log(hoge);
console.log(fuga);

これをwebpack + ts-loaderでビルドすると怒ってくれます。↓

ERROR in /hoge.ts
./hoge.ts
[tsl] ERROR in /hoge.ts(1,7)
      TS2322: Type '1' is not assignable to type 'string'.

ERROR in /hoge.ts
./hoge.ts
[tsl] ERROR in /hoge.ts(2,7)
      TS2322: Type '"aaaaa"' is not assignable to type 'number'.

が、Parcelでビルドすると「おっけー」と言って何も怒ってくれません。↓

root@7d465ea36beb:/# parcel build hoge.ts
✨  Built in 1.02s.

dist/hoge.js     1.09 KB    935ms
dist/hoge.map      271 B      5ms

typescriptでコーディングをする上でのメリットの一つがビルド時にある程度のミスを発見することにあると思っているので、ここは見てほしかった……。

parcel-plugin-typescriptが動かない（とどめ）

下記のプラグインを入れると型などを見て怒ってくれるらしいので、導入を試してみました。

github.com

が、動きませんでした。

🚨  SyntaxError: /hoge.ts: Unexpected token (1:10)

> 1 | const hoge: string = 1;
    |           ^
  2 | const fuga: number = "aaaaa"
  3 | console.log(hoge);
  4 | console.log(fuga);

よく分からんところで怒られる……。

調べてみたところParcelの最新版には対応してないようで、ダウングレードをすると動くらしいです（未検証）。

github.com

頑張れば動かせそうではありますが、「configファイル無しで動かせる」事にメリットを感じで導入を検討したので、「gulp入れて直でコマンドを叩くようにして、しかもParcelのダウングレードをしないといけないのかあ」と思い、それならまだWebpackで良いやとParcelの導入は今回は見送りました。webpack.config.jsを無くす代わりにgulpfile.jsが増えた時は何してるんだろうと思った。

というわけで今回は断念しました。導入自体はとても楽だったので、アップデートなどでいい感じになった時にはもう一度検討してみたいなあと思います。

ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

Parcelを導入を試みてから諦めるまで

詰まったところ

watchモードが、一度目の保存にしか対応しない

gulp-parcelが動かない

Typescriptのトランスパイル時にエラーを吐かない

parcel-plugin-typescriptが動かない（とどめ）