5 ms·

Rollup.js: A next-generation JavaScript module bundler

57 points by dmmalam 11y ago

tshannon 11y ago
I love it. It works great. Use it with https://github.com/rollup/rollup-babel https://github.com/rollup/rollup-babel for a complete es6 build.
- ludbb 11y ago
  So many things are next generation in JS that I can't tell what next generation means for JS anymore. For this package, does it mean I can't use today? I say that because typical packages do not declare jsnext:main yet, so you need to pass them as a list of external packages to rollup. It seems rollup won't produce an actual bundle when externals are used, is there any documentation about this? Taking react 0.14 as an example, rollup doesn't accept JSX so it doesn't work there either. Instead, you have to use a package that combines it with babel: rollup-babel (so now we are using a next generation next generation package). But running rollupbabel --external=react,react-dom --format=cjs --output=bundle.js -- index.jsx does not result in a bundle.js that bundles React. Is this too old for rollup?
- skrebbel 11y ago
  In all honesty, the fact that babel isn't just a "rollup plugin" of sorts, and requires all kinds of custom code and a custom command line tool, makes me a bit wary of rollup. This is JavaScript land, things move too fast to not have modularity. Babel is going to be horribly outdated and replaced by some other next big thing tomorrow. Or maybe I want to write part of my codebase in PureScript instead. Will I need a "rollupbabelpurescript" concoction? Or am I completely missing the point here?
  - tobr 11y ago
    I've been using Rollup and Babel together as they are, and it works fine. I haven't tried rollup-babel, but as I understand it, it mostly speeds up the build process.
  - tshannon 11y ago
    Well they are actually separate modules, and if you look at rollup-babel you'll see the main reason it exists is to speed up builds. > Using Rollup then using Babel slows down development, because Babel is much quicker dealing with small files than large bundles. But using Babel then Rollup often means you include helpers (e.g. classCallCheck) multiple times. They are two separate modules that you can plug into whatever build tool you want separately. But even if they weren't modular, is it that big of a deal? In my opinion what build tools I use means a lot less than where I'm investing my time in what I learn, and all of these JS tools are building to the ES6 standard. The idea being, that hopefully someday in the http2 + es6 future we won't need all these build tools, but that shouldn't stop us from building experience on them now.
progx 11y ago
Why not add a only Tree-Shaking Plugin to Webpack? Or is there any other breaking feature why a complete new builder is necessary?
- nailer 11y ago
  Probably for similar reasons webpack didn't add plugins to browserify.
  - mangecoeur 11y ago
    but what were those reasons?? Actually you can go down this rabbithole endlessly, asking each library in turn when they were invented rather than improving the one before...
- e1g 11y ago
  Looks like webpack2 will have that feature out of the box -https://github.com/webpack/webpack/tree/webpack-2/examples/harmony-unused https://github.com/webpack/webpack/tree/webpack-2/examples/h...
rhizome31 11y ago
What's the meaning of the interactive demo on that page? The project description says Rollup bundles modules together into a single file but the demo rather seems to show conversion between the ES2015 module format and other module formats.
- tobr 11y ago
  Rollup bundles multiple modules into a single module. The output module can be in several different formats. If you're bundling an app, you can use an IIFE ("globals" in the demo).
- lollipop25 11y ago
  The point of the tool is to statically analyze your code and only include what the code actually needs. It doesn't mindlessly concatenate and minify everything like what everything else does.
josteink 11y ago
Javascript seems to be its own wild west these days. There's multiple runtimes available so people use it everywhere. The language is reasonably flexible and there's no enforced conventions, so every library-writer creates their own. There's no real standard library, so everyone and their grandmother is implementing their own. There's no real module-system, so everyone is inventing their own. There's no standard build-system so everyone is creating their own. The result is a wonderful mess of lots things not really going too well together. Does this remind us of something we have disregarded earlier for exactly the same reasons? Oh yes it does! Hey, LISP. It seems we're still secretly in love with you :)
- cheez 11y ago
  I've been dealing with this mess for the last little while and it reminds me of c++: you need to create your own workflow more than with other languages like python.
  - lollipop25 11y ago
    Being a JS dev myself, I really hate how they just pile tool after tool just because they can. Kinda defeats the original design of JS.
hliyan 11y ago
They keep a lot of things in query params: http://rollupjs.org/#{"options": {"format":"es6","moduleName":"myBundle","globals":{}},"modules": [{"name":"main.js","code":"import { cube } from './maths.js';\nconsole.log( cube( 5 ) ); // 125"},{"name":"maths.js","code":"// This function isn't used anywhere, so\n// Rollup excludes it from the bundle...\nexport function square ( x ) {\n\treturn x * x;\n}\n\n// This function gets included\nexport function cube ( x ) {\n\t// rewrite this as `square( x ) * x`\n\t// and see what happens!\n\treturn x * x * x;\n}"}]}
explorigin 11y ago
Webpack's commons plugin is still a killer feature. Tree-shaking is nice though.

57 points by dmmalam 11y ago

I love it. It works great. Use it with https://github.com/rollup/rollup-babel https://github.com/rollup/rollup-babel for a complete es6 build.

ludbb 11y ago
So many things are next generation in JS that I can't tell what next generation means for JS anymore. For this package, does it mean I can't use today? I say that because typical packages do not declare jsnext:main yet, so you need to pass them as a list of external packages to rollup. It seems rollup won't produce an actual bundle when externals are used, is there any documentation about this? Taking react 0.14 as an example, rollup doesn't accept JSX so it doesn't work there either. Instead, you have to use a package that combines it with babel: rollup-babel (so now we are using a next generation next generation package). But running rollupbabel --external=react,react-dom --format=cjs --output=bundle.js -- index.jsx does not result in a bundle.js that bundles React. Is this too old for rollup?
skrebbel 11y ago
In all honesty, the fact that babel isn't just a "rollup plugin" of sorts, and requires all kinds of custom code and a custom command line tool, makes me a bit wary of rollup. This is JavaScript land, things move too fast to not have modularity. Babel is going to be horribly outdated and replaced by some other next big thing tomorrow. Or maybe I want to write part of my codebase in PureScript instead. Will I need a "rollupbabelpurescript" concoction? Or am I completely missing the point here?
- tobr 11y ago
  I've been using Rollup and Babel together as they are, and it works fine. I haven't tried rollup-babel, but as I understand it, it mostly speeds up the build process.
- tshannon 11y ago
  Well they are actually separate modules, and if you look at rollup-babel you'll see the main reason it exists is to speed up builds. > Using Rollup then using Babel slows down development, because Babel is much quicker dealing with small files than large bundles. But using Babel then Rollup often means you include helpers (e.g. classCallCheck) multiple times. They are two separate modules that you can plug into whatever build tool you want separately. But even if they weren't modular, is it that big of a deal? In my opinion what build tools I use means a lot less than where I'm investing my time in what I learn, and all of these JS tools are building to the ES6 standard. The idea being, that hopefully someday in the http2 + es6 future we won't need all these build tools, but that shouldn't stop us from building experience on them now.

progx 11y ago

Why not add a only Tree-Shaking Plugin to Webpack? Or is there any other breaking feature why a complete new builder is necessary?

nailer 11y ago
Probably for similar reasons webpack didn't add plugins to browserify.
- mangecoeur 11y ago
  but what were those reasons?? Actually you can go down this rabbithole endlessly, asking each library in turn when they were invented rather than improving the one before...
e1g 11y ago
Looks like webpack2 will have that feature out of the box -https://github.com/webpack/webpack/tree/webpack-2/examples/harmony-unused https://github.com/webpack/webpack/tree/webpack-2/examples/h...

rhizome31 11y ago

What's the meaning of the interactive demo on that page? The project description says Rollup bundles modules together into a single file but the demo rather seems to show conversion between the ES2015 module format and other module formats.

tobr 11y ago
Rollup bundles multiple modules into a single module. The output module can be in several different formats. If you're bundling an app, you can use an IIFE ("globals" in the demo).
lollipop25 11y ago
The point of the tool is to statically analyze your code and only include what the code actually needs. It doesn't mindlessly concatenate and minify everything like what everything else does.

josteink 11y ago

Javascript seems to be its own wild west these days. There's multiple runtimes available so people use it everywhere. The language is reasonably flexible and there's no enforced conventions, so every library-writer creates their own. There's no real standard library, so everyone and their grandmother is implementing their own. There's no real module-system, so everyone is inventing their own. There's no standard build-system so everyone is creating their own. The result is a wonderful mess of lots things not really going too well together. Does this remind us of something we have disregarded earlier for exactly the same reasons? Oh yes it does! Hey, LISP. It seems we're still secretly in love with you :)

cheez 11y ago
I've been dealing with this mess for the last little while and it reminds me of c++: you need to create your own workflow more than with other languages like python.
- lollipop25 11y ago
  Being a JS dev myself, I really hate how they just pile tool after tool just because they can. Kinda defeats the original design of JS.

hliyan 11y ago

They keep a lot of things in query params: http://rollupjs.org/#{"options": {"format":"es6","moduleName":"myBundle","globals":{}},"modules": [{"name":"main.js","code":"import { cube } from './maths.js';\nconsole.log( cube( 5 ) ); // 125"},{"name":"maths.js","code":"// This function isn't used anywhere, so\n// Rollup excludes it from the bundle...\nexport function square ( x ) {\n\treturn x * x;\n}\n\n// This function gets included\nexport function cube ( x ) {\n\t// rewrite this as `square( x ) * x`\n\t// and see what happens!\n\treturn x * x * x;\n}"}]}

explorigin 11y ago

Webpack's commons plugin is still a killer feature. Tree-shaking is nice though.