Deno用TypeScriptバンドラーを作りました

もともDeno本体にbundleコマンドを入れたいというのはRyanの考えだった

で、今年のはじめからちょこちょこと議論されていた

のだけど、これはなぜかAMDモジュールでバンドルされたファイルを生成するコマンドになっている

Ryanいわくこれはブラウザ向けにDenoファイルをバンドルするためのものらしい

のだけど今どきAMDっていうのもなぁ…とか

AMDってのはこういうやつ

code:js

....

})

AMDのバンドルは単体では動かない（requireJSを読み込む必要がある）

し、Denoでも動かないので一体どこで使いみちがあるんだと思っていた（おそらく多くの人が）

のでちょっと作ってみたわけで

使い方

code:bash

$ npm i -g @keroxp/tsb

$ tsb ./src/main.ts

以上です

Deno形式で書かれたts/jsファイルであれば、これだけで依存を全部とってきてバンドルします

code:index.tsx

const View = () => {

return (

<div>

{new Date().toISOString()}

</div>

)

};

window.addEventListener("DOMContentLoaded", () => {

ReactDOM.render(<View />, document.body);

});

tsb index.tsx

すると、React全部入りの一個のjsファイルになります

url importの解決はDenoとほとんど同じ

なのだけどDenoのfetchコマンドにはバグがあるのでそれを解決した方法で実現しています

Bundler概論

バンドラーを作るの始めてだったけど、思ったよりも思ったとおりに実装したらできた

そんなに難しくないです

TypeScript Compiler APIの使い方を覚えれば

というわけで9/22の技術書典7ではdeno-jaから出るDenobook2の一章としてtsバンドラー概論を書きます

バンドラーの設計に興味のある人は是非