Setting Up a JavaScript Build Process using Rollup

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • Scout APM - Truly a developer’s best friend
  • SonarQube - Static code analysis for 29 languages.
  • plugins

    🍣 The one-stop shop for official Rollup plugins (by rollup)

    And then one Rollup plugin to integrate Babel:

  • browserslist

    🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

    The env preset is a smart preset that uses Browserlist under the hood to determine which syntax is best to transpile to. The final step is to let Rollup know that it should call babel during the bundling process. To do so we are going to update the Rollup configuration file:

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • rollup-plugin-terser

    Rollup plugin to minify generated bundle

    Generating a bundle that has many dependencies, from our code or third-party packages, will result in a large JavaScript file. To optimize the bundle it is useful to integrate Terser into our build process. What Terser does is it removes comments, shorten variables names, cut whitespaces and minify our code to make it the shortest possible. Again Terser can be integrated with Rollup using a plugin:

  • rollup-plugin-postcss

    Seamless integration between Rollup and PostCSS.

    To process Less files we will use PostCSS, which is a JavaScript build tool for CSS, Less, and other CSS preprocessors. It also comes with a built-in minifier. We can add it to the project with a Rollup plugin:

  • autoprefixer

    Parse CSS and add vendor prefixes to rules by Can I Use

    One of the most interesting features of PostCSS is Autoprefixer. Much like Babel, it checks our browserslist requirement to add prefixes to CSS rules, ensuring cross-browser compatibilities. We can add it to the project with the following command:

  • Less

    Leaner CSS, in your browser or Ruby (via less.js).

    Now that we have addressed our scripts, we can focus on our styles. In this setup, we will look at the CSS preprocessor Less which lets us write CSS simpler, use variables and mixins. We can add it to the project with the following command:

  • ESLint

    Find and fix problems in your JavaScript code.

    ESLint is a linter, a program that will analyse our code to correct syntax and detect problems (missing brackets/parentheses, unused variables, etc.) during the build process. We are first going to add it to our project:

  • talent.io

    Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

  • d3

    Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

    Some third-party libraries like d3.js will have circular dependencies within them, which Rollup will warn us about when building the module. To avoid getting many warning messages, we can add a warning filter to in the Rollup configuration:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts