Rollup.js: A next-generation JavaScript module bundler

by dmmalam • 11 years ago

57 17 11 years ago

tshannon2• 11 years ago

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

ludbb• 11 years 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• 11 years 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?

tobr2• 11 years 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.

tshannon2• 11 years 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• 11 years 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• 11 years ago

Probably for similar reasons webpack didn't add plugins to browserify.

mangecoeur• 11 years 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• 11 years ago

Looks like webpack2 will have that feature out of the box -https://github.com/webpack/webpack/tree/webpack-2/examples/h...

rhizome31• 11 years 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.

tobr2• 11 years 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).

lollipop252• 11 years 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• 11 years 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• 11 years 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.

lollipop252• 11 years 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• 11 years 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• 11 years ago

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

Rollup.js: A next-generation JavaScript module bundler

Related Stories