copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/04/09

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

Written by Masayuki Yamada

  • JavaScript
  • rollup

INDEX

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

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View