Edited at

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

More than 1 year has passed since last update.


モチベーション


設定


依存モジュール

$ 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