モチベーション

webpackの全部のせ感が肌に合わない
Browserifyのシンプルさが好きで，特に文句もない
rollup.jsだと生成物が軽いと聞いた
- Rollupがちょうどいい感じ - Qiita
- browserify から rollup.js に乗り換えてる - やってる

設定

依存モジュール

$ npm install --save-dev \
    rollup \
    rollup-watch \
    rollup-plugin-node-resolve \
    rollup-plugin-commonjs \
    rollup-plugin-babel \
    rollup-plugin-env \
    babel-preset-es2015-rollup \
    babel-preset-stage-2 \
    babel-preset-react

$ npm install --save \
    react \
    react-dom

rollup plugins
- rollup-plugin-node-resolve
  - node_modules以下もモジュール検索対象になる
- rollup-plugin-commonjs
  - CommonJSなモジュールも読めるようになる
- rollup-plugin-babel
  - バベる
  - rollupが吐くのはES2015以降のナニかなのでバベる必要がある
- rollup-plugin-env
  - 環境変数をいい感じに展開する（React.js対策）
babel presets
- babel-preset-es2015-rollup
  - [This is babel-preset-es2015, minus modules-commonjs, plus external-helpers.]ﾄﾉｺﾄ(https://github.com/rollup/babel-preset-es2015-rollup)

あとはいつもどおり

`.babelrc`

特筆すべきことなし．

.babelrc

{
  "presets": ["es2015-rollup", "stage-2", "react"]
}

`rollup.config.js`

雑にconfig file．JSのAPIでゴリゴリやるのもアリ．

rollup.config.js

import nodeResolve  from "rollup-plugin-node-resolve";
import env          from "rollup-plugin-env";
import commonjs     from "rollup-plugin-commonjs";
import babel        from "rollup-plugin-babel";

export default {
  entry:    "src/scripts/app.js",
  dest:     "dist/bundle.js",
  plugins:  [
    nodeResolve({ jsnext: true, main: true }),
    env({ NODE_ENV: process.env.NODE_ENV }),
    commonjs(),
    babel()
  ]
};

罠

rollup-plugin-envでReactが内部に持ってるprocess.env.NODE_ENVを置換
- rollup-plugin-replaceつかってもOK
rollup-plugin-npmはdeprecatedなので，rollup-plugin-node-resolveを利用
Rollup.jsをBabel.jsのES2015 presetと併用する場合，babel-preset-es2015ではなくbabel-preset-es2015-rollupを利用

所感

細かい感想はちゃんとしたなんか作ってからにしたい気もするが，とりあえずザッとしたやつ．

よさそう

とくに文句はない
gulp-rollupを使ったときのgulpfileの感じはシンプルで好き
watchすればビルドも遅くない
- 大規模になったときにどうなるかは知らない
ガワを使うだけの学習コストならbrowserifyとも大差ないし，置き換えコストも高くない気がする（どっち向きについても）

きびしそう

licensify的なのが無くて厳しい
スーパー大規模になったJSアプリの知見あまり持ってないので，そのへんに詳しい人の意見とか聞きたい

モチベーション

設定

依存モジュール

.babelrc

rollup.config.js

罠

所感

よさそう

きびしそう

References

`.babelrc`

`rollup.config.js`