モチベーション
- webpackの全部のせ感が肌に合わない
- 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アプリの知見あまり持ってないので，そのへんに詳しい人の意見とか聞きたい
