In the previous tutorial, we introduced the use of webpack and how to build our projects using webpack. This article will describe how to use rollup.js as an alternative to webpack to package a front-end project.

The functionality to be achieved is simple.

  • The project can be packaged with rollup
  • support for typescript syntax
  • The ability to start a local service to launch the project and listen (watch) for changes to the project and update the page in real time

At the time of writing this article, I am using the latest version of nodejs.

1
2

$ node -v
v18.12.0

Initialize the project, install dependencies

  • Initialize the project

    Use the following command to create a project (package.json file).

    1

    npm init

  • Install the dependencies

    First install the packages required by the application.

    Install rollupjs:

    1

    $ npm install rollup --save-dev

    To support typescript syntax, install @rollup/plugin-typescript, rollup-plugin-dts (for easy generation of ts declaration files) and typescript.

    1

    $ npm install @rollup/plugin-typescript rollup-plugin-dts typescript --save-dev

    One of the packages requires a dependency on tslib, so install tslib.

    1

    $ npm install tslib --save-dev

    To start the local service, use web-dev-server, you need to install @web/dev/server.

    1

    $ npm install @web/dev-server

    To facilitate script execution, I also installed concurrently so that I can execute multiple commands at the same time.

    1

    $ npm install concurrently --save-dev

Configuration file

  • The default configuration file for rollup is rollup.config.js. Create a rollup.config.js file in the project root directory and enter the following content.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const config = [
    {
        input: 'src/index.ts',
        output: [
            {
                file: './lib/index.esm.js',
                format: 'es',
                sourcemap: true,
            }
        ],
        plugins: [
            typescript({
                tsconfig: './tsconfig.json'
            })
        ]
    },
    {
        input: "src/index.ts",
        output: [{ file: "lib/index.d.ts", format: "es" }],
        plugins: [dts()]
    }
]
export default config;

  • Create a tsconfig.json file in the project root directory and enter the following configuration.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    {
    "compilerOptions": {
        "sourceMap": true,
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "lib": [
            "es2017",
            "DOM"
        ],
        "strict": true,
        "esModuleInterop": false,
        "outDir": "out-tsc",
        "rootDir": "./",
        "allowJs": true,
        "noImplicitAny": true
    },
    "include": [
        "./src/**/*.ts"
    ]
}

  • To configure the web-dev-server configuration, create a web-dev-server.config.json file in the project root directory and enter the following content.

    1
2
3
4
5
6
7

    export default {
    port: 8000,
    nodeResolve: true,
    open: true,
    watch: true,
    appIndex: "index.html"
};

    When we start the service with the wds command, it opens the browser by default on port 8000 and listens for changes to the local files.

    Where appIndex indicates the html file of the project to be launched.

  • Configuration script commands

    Add scripts to the package.json file.

    1
2
3
4
5
6
7
8
9

    {
    ...
    "scripts": {
        "clear": "rm -rf lib/",
        "build": "npm run clear && rollup -c",
        "dev": "concurrently 'rollup -c -w' 'wds'",
    },
    ...
}

    It contains three commands.

    • clear: Deletes the build contents

    • build: builds the project using rollup

    • dev: use concurrently to run two commands simultaneously, use rollup to package the project and listen to it, repackage it if it changes, and use web-dev-server to start a local service

      When developing locally, run npm run dev and npm run build for packaging.