Setting Up a JavaScript Build Process using Rollup

• plugins

  16 3,543 8.0 JavaScript

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

  

And then one Rollup plugin to integrate Babel:

• browserslist

  55 12,769 7.8 JavaScript

  🦔 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:

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• rollup-plugin-terser

  2 615 0.0 JavaScript

  Discontinued 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

  3 672 0.0 JavaScript

  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

  31 21,510 7.2 JavaScript

  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

  2 121 0.0 Ruby

  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

  385 24,432 9.7 JavaScript

  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:

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• d3

  278 107,863 7.7 Shell

  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:

Suggest a related project