Bundler/Compiler
🎯

Bundler/Compiler

Builder

Name
Year
Language
Note
2011
JS
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
2012
JS
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, lintinWg, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
2013
JS
Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.
2014
JS
A completed workflow for different types of files
2015
JS
Compile small pieces of code into something larger and more complex
2017
JS
Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
2019
Rust
SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno. SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers
2020
Go
The main goal of the esbuild bundler project is to usher in a new era of build tool performance, while also creating an easy-to-use, modern bundler. Major features include: • Extreme speed without the need for a cache • Built-in support for JavaScript, CSS, TypeScript, and JSX • A straightforward API for CLI, JS, and Go • Bundles ESM and CommonJS modules • Tree shaking, minification, and source maps • Local server and watch mode
2020
JS
Snowpack is a modern, lightweight toolchain for web application development. It leverages the native ES modules (ESM) support in modern browsers for fast development builds, while optimizing your site for production using bundlers like webpack or Rollup.
2020
TS
Vite is a build tool and development server that uses esmodule to improve the dev performance. It's designed for the modern web, leveraging native ES modules for fast development and optimized builds. It uses esbuild during development, but using rollup at developemnt.
2020
JS
WMR is a tiny all-in-one development tool for modern web applications. It offers a development server, production bundler, and more with no dependencies or configuration. WMR supports JSX, CSS modules, and TypeScript out of the box.
2022
Rust
Turbo is a high-performance Rust-powered build system and task runner, designed to be easy to use while providing advanced caching, concurrency, and parallelism.
2022
Rust
Rspack is a high performance Rust-based JavaScript bundler that offers strong interoperability with the webpack ecosystem, enabling faster development cycles and efficient collaboration between the two tools.

Compile target

Template
// Modern browsers last 2 versions and since 2018 and > 0.5% // Compatible with low version PC browsers IE >= 11, > 0.5%, not dead // Compatible with low version mobile browsers iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead
 
It's used by other compilers like Babel, postcss-preset-env and autoprefix.
  1. In .babeelrc.json
JSON
{
  "presets": [
    [
      "@babel/preset-env",
      {
        // Specify the compatible browser versions
        "targets": {
          "ie": "11"
        },
        // The version of the base library core-js, usually specified as the latest major version
        "corejs": 3,
        // Polyfill injection strategy
        "useBuiltIns": "usage",
        // Do not convert ES module syntax to other module syntax
        "modules": false
      }
    ]
  ]
}
  1. package.json
JSON
{ 
  "browserslist": "ie >= 11"
}
  1. .browserslistrc
Plain Text
ie >= 11

Syntax Downgrade and Polyfill

Tool Overview
To solve the two types of syntax compatibility issues, two types of tools are mainly needed, including:
  • Compile-time tools. Representative tools include @babel/preset-env and @babel/plugin-transform-runtime.
  • Runtime base libraries. Representative libraries include core-js and regenerator-runtime.

Babel

  • The parse phase uses @babel/parser to convert source code to an AST.
  • The transform phase involves @babel/traverse, which traverses the AST and calls visitor functions to modify it. Modifying the AST involves creating, modifying, and judging AST, which requires @babel/types. When you need to create AST in batches, you can use @babel/template to simplify AST creation logic.
  • The generate phase prints the AST to a target code string and generates a sourcemap, and requires @babel/generator.
  • All the packages under babel are named under @babel/xxx
  • When encountering an error and wanting to print the code location, use the @babel/code-frame package.
  • The overall function of Babel is provided by @babel/core, which completes the entire compilation process of Babel and applies plugins and presets based on the above packages.

Preset of Babel

â‘  Official presets: Babel provides several official presets for common environments:
  • @babel/preset-env for compiling ES2015+ syntax
  • @babel/preset-flow for compiling Flow type declarations syntax
  • @babel/preset-react for compiling React project syntax
  • @babel/preset-typescript for compiling Typescript syntax

Types of nodes in AST

Type Name
Description
Program
The body of a block of code
VariableDeclaration
Declares variables such as let, const, var
FunctionDeclaration
Declares functions with the keyword function
ExpressionStatement
Usually calls a function, such as console.log(1)
BlockStatement
Statements enclosed within {} brackets, such as if (true) { console.log(1) }
BreakStatement
Usually refers to the break keyword
ContinueStatement
Usually refers to the continue keyword
ReturnStatement
Usually refers to the return keyword
SwitchStatement
Usually refers to the switch keyword
IfStatement
Usually refers to if (true) {} else {}
Identifier
Identifies variables, such as a in const a = 1
ArrayExpression
Usually refers to an array, such as [1, 2, 3]
StringLiteral
Usually refers to a string literal, such as '1' in const a = '1'
NumericLiteral
Usually refers to a numeric literal, such as 1 in const a = 1
ImportDeclaration
Declares an import with the keyword import

CLI

  • Use bable plugins to consform codes
Bash
babel --plugins @babel/plugin-transform-arrow-functions src/index.js -d dist

Parse

JavaScript
const  parser = require('@babel/parser');

const ast = parser.parse("const a =0;", {
    sourceType: 'unambiguous',
    plugins: ['jsx']
});
 
babel-handbook
jamiebuilds • Updated May 24, 2024
 
 
 

Webpack

Bash
webpack index.js -o dist/bundle.js --hot --inline --quiet

Loaders

In Webpack, loaders can be divided into 4 types: pre, post, normal, and inline. Among them, pre and post loaders can be specified through the enforce property of the rule object.
JavaScript
// webpack.config.js
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: ["a-loader"],
        enforce: "post", // post loader
      },
      {
        test: /\.txt$/i,
        use: ["b-loader"], // normal loader
      },
      {
        test: /\.txt$/i,
        use: ["c-loader"],
        enforce: "pre", // pre loader
      },
    ],
  },
};

Reference