TypeScriptとRollupJSを使ったレガシィシステムでトランスパイル環境構築

TypeScriptいいね

[TypeScript]:https://www.typescriptlang.org/
[rollup.js]:https://rollupjs.org/guide/en/
[Node.js]:https://nodejs.org/ja/
[terser]:https://terser.org

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

 関連記事
* [PHPレガシーシステムにTypeScriptを導入を考える](https://qiita.com/dozo/items/425ea5b62866cfd97fc7)

----
------------------- ↓ 余談はここから ↓-------------------
JavaScriptでそこそこ長いコードを書く機会が増えた。
例によって[TypeScript]を使っているわけだけど、
できあがったコードについて対応ブラウザがどうとか考えなくて良いのでありがたい。
IEですらPromiseのPolyfillが入ってりゃ十分対応できる。

```
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
```

仕事の立場上サイトのサーバー構成に関われることはほとんどないので、
バックエンドがNodeJSじゃないことはざらだし、
結構なボリュームのソースコードがHTML内のScriptタグに書いてあることも珍しくない。
その環境に[TypeScript]をどう持って行くかを毎回思案することになる。

トランスパイルしたファイルを以下のような感じで、
各ビューファイル上で出力したJavaScriptファイルを読み込める形にできていれば
どんなフレームワークでも基本的に対応できる。

```
<script>
<?php include("abcd.js"); ?>
</script>
```

ただ、ファイルが増えてくると手動であれこれやっていくのが厳しいので、
タスクランナーを使うことになるわけだが、
grantやglupは暗号みたいな記述が肌に合わず基本使わない。

私的に使いたいタスクランナーに[rollup.js]があるのだが、
今回上手く調整できたのでそれを残していこうと思う。
毎度のことながら[Node.js]のインストールから記述するが、
適当に読み飛ばして欲しい。


----
------------------- ↓ 本題はここから ↓-------------------
## [TypeScript]のインストール

### [Node.js]のインストール
何が無くてもnodeは必要なので。
あとnpmは遅すぎるのでyarnは必須。

```
$ curl -L git.io/nodebrew | perl - setup
$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc
$ source ~/.bashrc
$ nodebrew install-binary latest
$ nodebrew use latest
$ node -v
v12.6.0
$ npm
6.10.0
$ npm install -g yarn
$ yarn -v
yarn install v1.16.0
```

###### サンプルダウンロード
設定自体とは関係ないけど、
前提としてMicrosoftの[TypeScript]サンプルを使って説明するので、
以下をクローンしておく。
https://github.com/microsoft/TypeScriptSamples.git

```
$ git clone https://github.com/microsoft/TypeScriptSamples.git
$ cd TypeScriptSamples
$ yarn init -y # package.json生成
```

異なるソースがいくつか散らばっている想定で、
'jquery/parallax.ts', 'node/index.ts'をトランスパイルし、
出力先を別々にする。

### [TypeScript]のインストール
場所はglobalでもlocalでもdevでも。
とりあえずローカルに入れておく。

```
$ yarn add typescript tslib
$ ./node_modules/.bin/tsc -v
Version 3.6.3
```


## [rollup.js]のインストール
### [rollup.js]と各種プラグインのインストール
こちらもインストール先はどこでも可。
rollup-plugin-typescriptは1（無印公式）と2があるが2を使う。
localのdevに入れておこう。

```
$ yarn add --dev rollup rollup-plugin-typescript2
$ ./node_modules/.bin/rollup -v
rollup v1.21.4
```

### [rollup.js]の設定ファイル作成
rollup.config.jsというファイルを作成する。
init系のコマンドがあると良いのになぁ。

```
$ touch rollup.config.js
```

```rollup.config.js
import typescript from 'rollup-plugin-typescript2';

export default {
  input: {
    // 出力先: 入力元
    'abc/jquery':'jquery/parallax.ts',
    node:'node/index.ts',
  },
  output: {
    format: 'esm',
    dir: './dist/', // 出力先ディレクトリトップ
    entryFileNames: '[name].js',
  },
  plugins: [
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          module: "es2015",
        }
      }
    })
  ]
}
```

## 実行

### 実行コマンド
諸々準備できたので実行

```
$ ./node_modules/.bin/rollup -c
```

### 結果


```
./jquery/parallax.ts
./node/index.ts
```
↓ 上記TypeScriptソースをトランスパイルした結果

```
./dist/
  abc/jquery.js
  node.js
```

JSファイルを指定の場所に出力できている。
これをView側で読み込ませればTypeScriptとの連携が完成する


----
------------------- ↓ 後書はここから ↓-------------------
## コード圧縮(難読化)
[rollup.js]が使えたので、
プラグインでいくらでも出力結果を調整できる。
真っ先に追加したいのはコード圧縮だろう。
ソースはTypeScriptなので出力結果のJavaScriptなんて読める必要はない。

コード圧縮には定番だった[uglifyjs](http://lisperator.net/uglifyjs/)を使っていたが、
最近流行の[terser]を使うようにしている。

```
$ yarn add --dev rollup-plugin-terser
```

[rollup.js]の設定ファイルはこんな感じ

```
import { terser } from "rollup-plugin-terser";
～～～
  plugins: [
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          module: "es2015",
        }
      }
    })
    ,terser()
  ]
```


#### rollup-plugin-*

今回の調査で[rollup.js]いろんなプラグインを調べた。

* rollup-plugin-multi-entry
* rollup-plugin-multi-input
* rollup-plugin-entry-glob

しかし、どれも鳴かず飛ばずという感じ。
諸々検討した結果本体内蔵の機能を使うことにした。

* [Rollup:input](https://rollupjs.org/guide/en/#input)