React + rollup.js + Babel (ES2015 + stage-2)

  • 15
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

モチベーション

設定

依存モジュール

$ 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

あとはいつもどおり

.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アプリの知見あまり持ってないので,そのへんに詳しい人の意見とか聞きたい:ear:

References