Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Module packer

Rollup.js is a module packer. It takes input files and combines them into a single output file in one or more formats.

Here’s a simple rollup-demo project with a helpers.js file, as shown below.

let answer = 42

let getTheAnswer = function () {
  return answer
}

export default getTheAnswer
Copy the code

The other index.js imports content from helper.js, as shown below.

import getTheAnswer from './modules/helpers.js'

let name = 'O.O'

alert('The answer is ' + getTheAnswer())
Copy the code

We can use rollup.js to output a main.js file that imports all the necessary files and functions and restricts them to IIFE, as shown below.

(function () {
  'use strict'

  let answer = 42
  let getTheAnswer = function () {
    return answer
  }

  alert('The answer is ' + getTheAnswer())
})()
Copy the code

This avoids the performance problems caused by multiple HTTP requests when using the native ES module and also allows you to run scripts in older browsers that do not support the ES module.

Let’s see how it works.

How do I use rollup.js

We first install rollup as a development dependency on the project:

$ npm i rollup -D
Copy the code

If you wish, you can run rollup.js entirely from the command line. However, creating a configuration file is much easier.

Create a file named rollup.config.js in the project root directory. This is where we’ll tell rollup.js which files to package and how to output them.

In our example, we specify the entry file as index.js and output it as a file named main.js. Any imports in index.js will also be pulled in automatically. We want to output the file as iIFE.

export default {
  input: 'index.js'.output: [{file: 'dist/main.js'.format: 'iife'}}]Copy the code

To run rollup.js, we can type NPX rollup –config on the command line.

  • npxIt will go straightnode_modules/.binFind the command to run. If you have rollup installed locally, you can ignore it.
  • rollupKeyword run rollup.js
  • --configTell it to use our configuration file for all options and Settings.

In larger development projects, it can be helpful to create NPM commands to run common tasks.

In the package.json file, we add a scripts object. And add a “build”: “rollup –config” :

{
  "scripts": {
    "build": "rollup --config"}}Copy the code

Running NPM run build produces a main.js file that looks like this:

(function () {
  'use strict'

  let answer = 42

  let getTheAnswer = function () {
    return answer
  }

  alert('The answer is ' + getTheAnswer())

})()
Copy the code

Using output files

When you use a new main.js file, you can skip the type=”module” attribute on script elements.

The packaged file is not a module. It is a plain old traditional script built from the ES module using the module packer.

Generate multiple formats

How to create multiple file formats from your package.

For example, suppose you have a JS library that you want to distribute in a browser-supported format (IIFE or display module mode), along with a file with an ES module export, and another file for Node.js.

Rollup.js makes it very easy to write a code base once and make it available to a variety of users in a variety of formats.

rollup.config.jsExport an array from a file

In the rollup.config.js file, we export a Settings object, as shown below.

export default {
  input: 'index.js'.output: [{file: 'dist/main.js'.format: 'iife'}}]Copy the code

But rollup.js also allows you to export a set of options and will iterate over each option and generate a file based on it.

In the rollup.config.js file, let’s create an array to export as formats. In this case, let’s create an IIFE (IIFE), an ES module (ES) that packs all the components into one file, and a Common JS file (CJS) for Node users to use.

let formats = ['iife'.'es'.'cjs']
Copy the code

Next, we’ll use the array.map () method to iterate over each format, create a configuration for it, and generate a new configuration Array.

let formats = ['iife'.'es'.'cjs']

export default formats.map(format= > {
  return {
    input: 'index.js'.output: {
      file: 'dist/main.js'.format: format
    }
  }
})
Copy the code

With this setting, we will create three different exports, one of each format. However, because they all export to main.js, each overwrites the one before it.

Create a unique file name

We can use format as part of the file name.

One thing I like to do is use the ternary operator to check if format is iife. If so, I make it the main file and add the format name to the rest of the files.

export default formats.map(format= >  {
  return {
    input: 'index.js'.output: {
      file: `dist/main${format === 'iife' ? ' ' : `.${format}`}.js`.format: format
    }
  }
})
Copy the code

Now, when you run NPM Run build, you get three files with three different output formats: main.js, main.es.js, and main.cjs.js.