rollup+gulpで快適な開発環境をつくる！

JavaScript

ファイル構成
package.json
rollup.config.js
gulpfile.js
参考

ここ数年、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));

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