Help us understand the problem. What is going on with this article?

rollup.js と babel で script タグと npm 両対応のライブラリを作った話

More than 3 years have passed since last update.

rollup.js を用いて <script> と npm 両対応のライブラリ smart-dropdown-menu を作成しました。

smart-dropdown-menu

ドロップダウンメニューを作成するためのライブラリです。
大きな特徴として、mousemove イベントを利用せず、カーソルの斜め移動時(サブメニューへの移動等)に、ホバー判定を継続する処理が入っています。

smart-dropdown-menu の仕組みについては、以下のブログ記事で解説しています。
ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った - 備忘録β版

rollup.js による <script> と npm 両対応

初めは browserify を用いていたのですが、rollup.js は出力形式に umd を指定できることから、<script> による読み込みと npm による管理の両方に対応するため、移行しました。

rollup.config.js
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/js/smart-dropdown-menu.js',
  dest: 'dist/js/smart-dropdown-menu.js',
  format: 'umd',
  moduleName: 'SmartDropdownMenu',
  plugins: [
    babel()
  ]
}
.babelrc
{
    "presets": [
        [
            "es2015",
            { "modules": false }
        ]
    ],
    "plugins": ["external-helpers"]
}

rollup.js で babel を用いる場合、以前は babel-preset-es2015-rollup を用いるようになっていましたが、現在は rollup.js 用の presets を使う必要は無くなっています。

babel-plugin-external-helpers については、私のブログに記載したものがありますのでよろしければどうぞ。
babel-plugin-external-helpers について - 備忘録β版

ビルド周り

普段は gulp を使っているのですが、rollup.js, babel, gulp の組み合わせは相性が悪かったので、npm-scripts ですべて行うことにしました。

参考:ES6のgulpfile.babel.jsがrollupのpresetとconflictしたときの対処法 - Qiita

npm-run-all を用いると glob で実行するタスクを指定できるため便利です。

package.json
{
  "scripts": {
    "build:sass": "node-sass src/scss -o dist/css",
    "build:sass:watch": "node-sass -w src/scss -o dist/css",
    "build:js": "rollup -c rollup.config.js & rollup -c rollup.config.minify.js",
    "build:js:watch": "rollup -w -m inline -c rollup.config.js & rollup -w -m inline -c rollup.config.minify.js",
    "browsersync": "browser-sync start -s --startPath example --files 'example/*.html, dist/js/**/*.js, dist/css/**/*.css'",
    "build": "npm-run-all -p build:*",
    "dev": "npm-run-all -p build:*:watch browsersync",
    "version": "npm run build && git add --all",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

browser-sync と npm-run-all

開発中にブラウザを自動リロードしてほしかったため browser-sync を用いていました。

以下のように npm-run-all で browser-sync のタスクも実行しようとしていたのですが、browsersync のみが実行され build:*:watch が実行されず悩まされました。

package.json
{
  "scripts": {
    "browsersync": "browser-sync start -s --startPath example --files 'example/*.html, dist/js/**/*.js, dist/css/**/*.css'",
    "dev": "npm-run-all browsersync -p build:*:watch"
  }
}

簡単に調べたところ browser-sync は npm-run-all で直列実行ができないようで、browsersync のタスクも並列実行に含めることで対応しました。
おそらく、browser-sync の exit status が0でないことが原因ではないかと思います。

まとめ

rollup.js を使うのは初めてでしたが <script> と npm の両対応が簡単に出来たので、用途によっては browserify ではなく rollup.js を用いることを検討しても良いかと思います。

mixi
全ての人に心地よいつながりを
http://mixi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away