Babel 7 で rollup-plugin-typescript と rollup-plugin-babel を同時に使おうとすると、babelがトランスパイルしてくれない

TL;DR

babelプラグインを呼び出すときに、{ extensions: ["ts"] } を与える。

追記（2018/09/26 21:30）

ふとissueを見たら、20時間前くらいに似た問題が挙がって、同じ方法で解決してた。なぜ先に見なかったのか。

0. 実行環境

// package.json
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "rollup-plugin-babel": "^4.0.3",
    "rollup-plugin-typescript": "^1.0.0",
    "tslib": "^1.9.3",
    "typescript": "^3.0.3"
  }

rollup: v0.66.2

1.やろうとしたこと

Rollupで

• TypeScript のトランスパイル
• Babel のトランスパイル

を一緒にやる。

2.やったこと

少し調べればすぐに rollup-plugin-typescript と rollup-plugin-babel の2つのプラグインが見つかるので、これを使う。*1

tsconfig.json でターゲットを ES6 にすることに注意して:

// rollup.config.js
import ts from "rollup-plugin-typescript"
import babel from "rollup-plugin-babel"

export default {
    input: './app.ts',
    output: {
        file: 'app.js',
        format: 'iife',
        name: 'app'
    },
    plugins: [
        ts(),
        babel()
    ]
};

2-1. 結果

TypeScript のトランスパイルはされているが、Babelのトランスパイルがされていない。

3. 原因

デバッグ用に簡単なプラグインを書いて確かめた結果、rollup-plugin-babel に渡ってくる id が main.ts のままであることがわかった。
rollup-plugin-babel のソースコード（v4.0.3）を見ると、43行目から55行目にかけて:

const {
        exclude,
        extensions,
        externalHelpers,
        externalHelpersWhitelist,
        include,
        runtimeHelpers,
        ...babelOptions
    } = unpackOptions(options);

    const extensionRegExp = new RegExp(`(${extensions.map(escapeRegExpCharacters).join('|')})$`);
    const includeExcludeFilter = createFilter(include, exclude);
    const filter = id => extensionRegExp.test(id) && includeExcludeFilter(id);

とあり、unpackOptions をさらに追いかけると、@babel/core の DEFAULT_EXTENSIONS を使っている。
これには ts が含まれていないので、extensionRegExp.test(id) によって filter が false を返し、スキップされてしまっている。

4. 対策

babelプラグインを呼び出すときに、{ extensions: ["ts"] } を与える。

// rollup.config.js
import ts from "rollup-plugin-typescript"
import babel from "rollup-plugin-babel"

export default {
    input: './app.ts',
    output: {
        file: 'app.js',
        format: 'iife',
        name: 'app'
    },
    plugins: [
        ts(),
        babel({
            extensions: ["ts"]
        })
    ]
};

5. おわり

この extensions という引数は特にドキュメントにも書いてないようだった。
実は .babelrc で設定できるのかと思って試したけどダメだった。
今回はTypeScriptだったけど、たとえばCoffee Scriptでも似たような現象は起こりえると思う。

もっといい方法があるよ、とか、ここに書いてあるよ、とかあったら教えて下さい。

*1: rollup-plugin-typescript2 のほうが良いという話しもある

どうぶつの森

ここ1ヶ月くらい、「とびだせ どうぶつの森」をやってる。

どうぶつの森シリーズは、ゲームキューブの e+ に始まって、おいでよ どうぶつの森は死ぬほどやった。とびだせ！も、このためだけに3DSを買った。
はじめてから4年半が経って、プレイ時間は140時間くらい。途中で1年くらい放置してることもあって、あまりハマったとは言えない。

最近、また e+ を遊ぶ機会があって、感じたのが、シリーズが人気になって、良くも悪くも「わかりやすくなった」のだということ。
住民同士の尖った会話やブラックジョークはまったくと言っていいほどないし、そもそも、住民同士の会話もほとんど起こらない。
会話の内容も一辺倒になって、魚を取ってきて、フルーツを取ってきて、家具を持ってきて、遊びに来て、遊びにいかせて、がほとんど。
なんというか、話しかける楽しみがない。

まあ「NPCと会話を楽しむ」って要素はもうウケないのか。わざわざNPCなんかと話さずとも、インターネット経由でPCと遊べるのだから、当たり前の進化なのかもしれない。

この有様だから、ポケットキャンプもハマれなかったし、おそらく、今後の作品も似た感じで楽しめないのだと思う。

最近のゲームはソーシャルソーシャルしててよくわからない。じじいになってしまったようだ。

6月の振り返り

暑くて眠れないのでブログを書く。
1ヶ月丸々放置した。

ラズパイ

結局買っていない。

ゲーム

『VA-11 HALL-A』っていう、バーテンダーゲームをひたすらやってた。オススメ。ちなみにLinuxでも遊べる。

xmonad

レイアウト周りとか、まだ不満はあるけど、ほとんどいじらなくなった。
NerdFonts は使うのをやめた。別に問題があったわけではないけど、別になくていいやって結論。

…ゲーム以外、特になにもしていないね。思う出したら追記する。