The JavaScript ecosystem evolves at a rapid pace, and you know your toolset will be superseded the moment you choose it!
It’s impossible to keep up with all libraries, frameworks, and techniques, but you can observe trends and directions of movement within the industry. React.js, Vue.js, Svelte, Node.js, and Express.js will remain popular during 2021, but some interesting helper tools are bubbling to the surface.
Here are my top picks for 2021. But please don’t rely on my opinion. Evaluate them for yourself.
Rollup.js
Table of Contents
Rollup.js is a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. It compiles small chunks of code into larger single files and includes:
a plugin architecture
The core system can be extended with plugins such as Babel ES5 transpiling, TypeScript integration, ESLinting, Terser minification, and even CSS processing.
module compatibility
Rollup.js supports standard ES6 modules but Node-based CommonJS
require()modules can be parsed with a plugin.tree-shaking
Code is statically analyzed to exclude variables, functions, and methods which aren’t used. You can therefore import a large library, but only the features you’re using will be included in the final bundle.
code splitting
Rollup can split code into chunks for dynamic (on-demand) loading or multiple entry points.
Rollup.js can be executed from the command line, an npm script, and general task runners such as Gulp with or without watch options.
A rollup.config.js file can be defined for more complex configurations. For Example:
// rollup.config.js // CommonJS plugin import commonjs from '@rollup/plugin-commonjs'; export default { // primary source entry script input: './src/main.js', // output script and format output: { file: './build/main.js', format: 'iife' }, // plugins plugins: [ commonjs() ] }; Rollup.js first appeared in 2018 but has been gaining momentum thanks to its speed and simplicity. You may have used it without realizing in Snowpack.
Snowpack
Snowpack is a fast front-end build tool and a direct competitor to heavyweight options such as webpack and Parcel. The benefits include:
- instant startup
- single build with caching
- hot module reloading
- dozens of plugins
- built-in support for ES6 modules, CommonJS modules, TypeScript, Svelte, React, JSX, CSS modules, and more
Snowpack builds assets automagically. You can install it into any project as a development dependency:
npm install --save-dev snowpack Then launch a development server:
npx snowpack dev This opens the default index.html file in your browser. All pages are scanned for JavaScript and CSS files, which are bundled into single assets.
A final production site can be created in a build directory with:
npx snowpack build A snowpack.config.js configuration file can define plugins and further options.
Development has been rapid, and Snowpack version 3.0 launched in January 2021. According to the website, “once you try it, it’s impossible to go back to anything else.”
Rome
Modern development requires you to install, configure, and learn a range of tools with different methods and techniques. Rome aims to unify the front-end development toolchain by providing a linter, compiler, bundler, document generator, formatter, test runner, and minifier for HTML content, CSS, and JavaScript. In essence, it’s a zero-dependency package which replaces webpack, Babel, ESLint, Prettier, Jest, and others.
Rome has been in active development throughout 2020 and, at the time of writing, only linting is supported. However, the project has gained considerable attention and the recent call for funding has exceeded more than a quarter of its $100,000 goal.
If Rome can successfully achieve its aims, it may become the only tool you need.
Continue reading 5 JavaScript Tools to Look Out For in 2021 on SitePoint.
