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

TypeScriptいいね

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

------------------- ↓ 余談はここから ↓-------------------
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を使っていたが、
最近流行の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