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.
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.
Rollup.js supports standard ES6 modules but Node-based CommonJS
require()modules can be parsed with a plugin.
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.
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.
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 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
A final production site can be created in a
build directory with:
npx snowpack build
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 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.