rollup.jsでpreserveModulesを有効にしつつファイル名や拡張子を変える

この記事の概要

rollup.jsを使っていて、アウトプット先を複数ファイルに分ける際にファイル名や拡張子を変更するのに手こずったので記事にしました。

背景

今回の悩みにぶつかった経緯は以下の流れです。

• preserveModulesをtrueにしたい
• CJSとESMを両方含むパッケージを作りたい→拡張子をcjsとmjsの2つ用意したい
• {具体的なモジュール名}.jsになっているファイル名をindex.jsに統一したい
  • ただし、最終的にこの内容は無くなった

やること

• rollup.config.jsのoutput.entryFileNamesを追加する
  • デフォルトのentryFileNamesは[name].jsが定義されているので、オーバーライドする

名前を変えたいときの例

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    entryFileNames: 'index.js', // デフォルトだと「{ファイル名}.js」と出力されるのが、すべて「index.js」になる
    preserveModules: true,
  }
};

拡張子を変えたいときの例

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    entryFileNames: '[name].mjs', // デフォルトだと「{ファイル名}.js」と出力されるのが「{ファイル名}.mjs」になる
    preserveModules: true,
  }
};

感想など

単一ファイルを出力する際はどうとでもなりますが¹、複数ファイルでもうまく指定できるように用意されているのが助かりました。
とは言え、1つのoutput指定では1つのルールしか指定できないので、複雑なことをやろうと思ったら複数のoutputを作成する必要があります。

オプションでは[name]以外に[format]と[hash]も使えますが、あまり使い道が分かっていないです。
assetFileNamesやchunkFileNamesの使い方もピンときておらず、そのあたりが原因かもしれません（オプション内容がそれぞれ似ているけど違いがよくわかっていません）。
[format]で指定できる形式はcjsとesだけど、拡張子として使いたいのはcjsとmjsで、微妙に対応が取れておらず苦戦しました。

参考資料

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！

1. entryFileNames: 'super-awesome-file-name.js',でもなんでも、具体的に指定できます ↩