@netvlies/wsc-builder

The wsc-builder (also known as Bob) is the frontend build process for Netvlies' website cel. It is the functional heart of all our projects frontend systems. It's main purpose is to serve as a build system, and it is the core of the Nvs frontend skeleton. This process is configurable using the config.js file.

Contents

1. Prerequisites
2. Setup
3. Usage
4. Legacy browser JS support
5. Rollup settings
6. Troubleshooting
7. Changelog

Prerequisites

What you need to have installed beforehand.

• Node (>= v14)
• NPM

Setup

The module can be installed by running:

npm i -D @netvlies/wsc-builder

Usage

There are 2 commands you should mainly use:

• npm run dev
• npm run build

The dev command builds your files and implements a file watcher detect file edits in order to automatically build again.

The build command also builds your files, but also minifies the output in order to generate an efficient format.

Before you get start building, you should take a look in the config.js file to adjust some settings for your project.

Legacy browser JS support

By default none of the Node modules (inside ./node_modules/) are transpiled with Babel. The only code that Babel transpiles is inside src/js/. If you install JS modules, you need to make sure to import the version the Node module that fits your target browsers. Some modules may only provide a modern, ES6+ export. If you need support for old browsers like IE11 that don't support modern features like class, these modules may need to be transpiled. Include them in the Babel transpilation step via the config.js as such:

// Example config for transpiling node modules with Babel to support legacy browsers:
babel: {
    include: [
        './src/js/**',
        './node_modules/@netvlies/wsc-js-moduleloader/**',
        './node_modules/any-other-modern-module/**',
    ]
},

Rollup settings

By default, Babel is only used in the build commmand and not used in dev command. To configure the compilation of JS in a different way, see the following settings:

rollup: {
    // Don't use Babel to provide polyfills when running `npm run dev`:
    useBabelInDevelopment: false,
    // Use Babel when running `npm run build`:
    useBabelInProduction: true,
    // Use no polyfills for node built-in functions, like the native `path` of `url` modules:
    useNodeBuiltins: false,
    // When used, an array[] to provide extra rollup plugins you'd like:
    extraPlugins: false
}

Troubleshooting

If you get Node or NPM related errors, run nvm use first if there is a .nvmrc file present in the /frontend folder. You can read more about it here.

Changelog

See CHANGELOG.md.