JavaScript build systems

bundlers: find, process and bundle dependencies
transpilers (e.g. for JavaScript variants, SCSS, ...)

Bundlers

bundlers: e.g. webpack, parcel, rollup

Transpilers

transpiler: example for JavaScript: babel:

modern JavaScript
TypeScript
JSX

Bundlers

bundlers act as starting points for builds:

find resources (often declared via import)
transpile / process resources (via plugins)
bundle resources

Bundlers

example bundler:

webpack: widely used, many plugins
parcel: easy to use
rollup: for creating JS libraries
esbuild: very fast

Transpilers

transform code

example: processing of JavaScript:

modern JavaScript
TypeScript
JSX
minification

Parcel

simple bundler that supports:

modern CSS
CSS modules
SCSS
modern JS
TypeScript
WebAssembly
Rust

Parcel: basic project setup

start with a package.json file that contains an empty object: {}

install dependencies:

npm install parcel

Parcel: basic project setup

in src/index.js:

import { add } from './mymath.js';

console.log(add(1, 1));

in src/mymath.js:

export const add = (a, b) => a + b;

Parcel: basic project setup

Konfiguration in package.json:

{
  "source": "src/index.html",
  "scripts": {
    "build": "parcel build",
    "start": "parcel"
  }
}

Parcel: basic project setup

HTML entry point in src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>React starter app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

Parcel: basic project setup

build via:

npm run build

development server on localhost:8080 via:

npm run start

Webpack

bundler that uses JavaScript as its central language - relies on import statements

Webpack: basic project setup

start with a package.json file that contains an empty object: {}

install dependencies:

npm install webpack webpack-cli webpack-dev-server

Webpack: basic project setup

in src/index.js:

import { add } from './mymath.js';

console.log(add(1, 1));

in src/mymath.js:

export const add = (a, b) => a + b;

Webpack: basic project setup

configuration via webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

use src/index.js as an entrypoint

write the result to dist/, using dist/bundle.js as an entrypoint

Webpack: basic project setup

npm scripts in package.json:

"scripts": {
  "build": "webpack",
  "start": "webpack serve --mode development"
}

Webpack: basic project setup

build via:

npm run build

development server on localhost:8080 via:

npm run start

Webpack loaders and plugins

examples:

html-webpack-plugin
babel-loader (JavaScript variants)
style-loader, css-loader

HTML plugin

creates an HTML page that runs the JavaScript

HTML plugin

npm install html-webpack-plugin

in webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

  plugins: [
    new HtmlWebpackPlugin({title: "page title"})
  ],

Babel loader

npm install babel-loader @babel/core

activating babel in webpack.config.js:

  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },

note: in this configuration Babel will not modify the code

Babel configuration

npm packages:

@babel/core
@babel/preset-env (modern JS)
@babel/preset-react (JSX)
@babel/typescript

Babel configuration

possible configuration - e.g. in package.json:

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },