コンパイラかく語りき

import { Fun } from 'programming'

トップ > Rollup.js > 最小構成で始めるRollup.js

最小構成で始めるRollup.js

Rollup.js JavaScript

最小構成で始めるRollup.js

Rollup.jsについては、既に素晴らしい記事があります。

Rollupがちょうどいい感じ

しかし、初心者がRollupを使い、なおかつJSのモジュールシステムに馴染みがないとすると、もっとシンプルな構成が望ましいかなと思い、この記事を書きました。

パッケージインストール

  • Rollup.js関連
    • rollup: 本体
    • rollup-watch: watch機能のために必要（注 experimental）
  • babel関連
    • rollup-plugin-babel: rollupでbabelを使うためのプラグイン。
    • babel-preset-es2015-rollup: ES2015のトランスパイルに必要。

rollup-plugin-npmについては、deprecateされており、いまはrollup-plugin-node-resolveという名前になっております。 また、ES6スタイルではないサードパーティのモジュールを用いる場合には、rollup-plugin-commonjsが必要です。

今回はまずRollupを使ってみるという趣旨なので、上記の2つは除外しました。 ただ、babelについてはimport/exportを使いたいので含めました。

というわけで、パッケージインストールは以下のとおり。

$ npm install --save-dev rollup rollup-watch rollup-plugin-babel babel-preset-es2015-rollup

設定ファイル

Babelの設定はbabelrcに。

// .babelrc
{
  "presets": [ "es2015-rollup" ]
}

Rollupの設定はrollup.config.jsに書きます。

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

export default {
  entry: 'src/main.js',
  dest: 'dist/bundle.js',
  plugins: [
    babel() // ES5に変換
  ]
}

実行コマンド

rollup -c // 単発ビルド
rollup -c -w // ウォッチビルド

npm scriptsにでも追記すると良いと思います。

トライ

あとは、ご自由にモジュールを作成して、バンドルしてください。

一応、動作するコードをGithubにあげました。参考までに。 https://github.com/chuck0523/learning-langs/tree/gh-pages/js/modules-bundler/minimum-rollup-setup