ここ数年、javascriptのコンパイルにはrollup.jsを使用しているのですが、いろいろな記事を参考にしながら作っててもなかなかしっくり来ないまま、とりあえず動く程度にしてしまっていました。
最近になってようやく形が固まってきた気がするのでまとめておきます。
今更な気もしますが、少しでも参考になれば幸いです。

ファイル構成

必要なファイルと構成はこんな感じ。
gulpを通さない場合は、gulpfile.jsはなくて大丈夫です。

Root
 ├ dist
 │  └ js
 │     └ bundle.js
 ├ gulpfile.js
 ├ package.json
 ├ rollup.config.js
 └ src
    └ js
       └ main.js

package.json

{
  "name": "rollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config",
    "watch": "rollup --config --watch"
  },
  "author": "evoworx",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "rollup": "^2.41.2",
    "rollup-plugin-buble": "^0.19.8",
    "rollup-plugin-node-resolve": "^5.2.0",
  }
}

devDependenciesに記述してあるプラグインたちをインストールします。

npm install

rollup.config.js

const resolve = require('rollup-plugin-node-resolve');
const buble = require('rollup-plugin-buble');

module.exports = {
  input: 'src/js/main.js', // 作業用メインJSのディレクトリ ＋ ファイル名 
  output: {
    file: 'dist/js/bundle.js', // 出力先のディレクトリ ＋ ファイル名
    format: 'umd', // 出力形式を指定
  },
  plugins: [
    resolve(),
    buble()
  ]
};

formatの違いについてはこちらの記事でとても分かりやすくまとめられていて参考になりました。

gulpを通さずにrollupだけ動かす場合は、

rollup --config

watchする場合は、

rollup --config --watch

とするとコンパイルすることができます。

gulpを通して使う場合は、gulpfile.jsを作成します。

gulpfile.js

const gulp = require('gulp');
const rollup = require('rollup');
const rollupConfig = require('./rollup.config');

const rollupjs = (cb) => {
  rollup.rollup(rollupConfig)
  .then(bundle => {
    bundle.write(rollupConfig.output)
  })
  .then(() => {
    if (cb) cb();
  })
  .catch(error => {
    if (cb) cb();
    console.error(error);
  })
}

gulp.task('js', gulp.series(rollupjs));

これでコマンドを打てばコンパイルすることができます。

gulp js

これで完了！あとは必要に応じてプラグインを追加したりすれば実案件でも使っていけると思います。

いろいろなものがアップデートされていくので、その都度更新して対応していかないといけないので、これからも情報収集して快適な環境をつくっていきたいと思います！

参考

rollup.js 公式サイト
Rollupがちょうどいい感じ
GulpでRollupを使う / rollup-stream、rollup
もうBabelじゃない – Bubleだ。
rollup が求めてたものだったかもしれない
GulpでRollupを使う / rollup-stream、rollup