![]() ![]() While this won’t eliminate all of our problems with debugging, it goes a long way toward squashing bugs that are due to obvious typos and oversights. Something that has the potential to introduce a mystery bug is now pointed out instantly, including the file, line, and column where the issue is happening. Install the necessary modules.įirst, we need to install the Babel Rollup plugin and the appropriate Babel preset. So let’s make that part of our Rollup process so we don’t have to think about it. Having access to the new features of JavaScript makes the language simpler, cleaner, and more pleasant in general. If you’ve never used Babel, your life as a developer is about to change forever. This project transpiles new features of JavaScript ( ES6/ES2015 and so on) into ES5, which will run on virtually any browser that’s still used today. Step 2: Set up Babel so we can use new JavaScript features now.Īt this point, we’ve got a code bundle that will work in modern browsers, but it’ll break if the browser is even a couple versions old in some cases - that’s not ideal.įortunately, Babel has us covered. NOTE: It’s important to keep in mind, though, that when we’re dealing with such a small example app it doesn’t take much to double a file size. But Rollup doesn’t - it’ll only bring in what we’re actually using. ![]() If we’re only using one or two - think lodash or jQuery - there’s a lot of wasted overhead in loading the rest of the library.īrowserify and webpack will end up including a lot of unused code right now. Tree-shaking becomes really important when we’re including third-party tools or frameworks that have dozens of functions and methods available. ![]() It’s also much easier for Rollup to remove unused code from modules using something called tree-shaking, which basically just means only the code we actually need is included in the final bundle. This happens because Rollup is based on ES2015 modules, which are more efficient than CommonJS modules, which are what webpack and Browserify use. This gets pretty nerdy, so the tl dr version is this: compared to the other tools for creating JavaScript bundles, Rollup will almost always create a smaller, faster bundle. What makes Rollup exciting, though, is its ability to keep files small. However, it’s important to note that while you can use Grunt and Gulp to handle tasks like creating JavaScript bundles, those tools would use something like Rollup, Browserify, or webpack under the hood. You could also call Rollup a build tool, which would put it in the company of things like Grunt and Gulp. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js. Rollup is a next-generation JavaScript module bundler.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |