Note--Bundler/Compiler

Builder

Name	Year	Language	Note
browserify	2011	JS	Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
gruntjs	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.
gulpjs	2013	JS	Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.
webpack	2014	JS	A completed workflow for different types of files
rollupjs	2015	JS	Compile small pieces of code into something larger and more complex
parceljs	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.
SWC	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
esbuild	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
snowpack	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.
vitejs	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.
wmr	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.
turbo	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.
rspack	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.

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
      }
    ]
  ]
}

package.json

JSON

{ 
  "browserslist": "ie >= 11"
}

.browserslistrc

Plain Text

ie >= 11

Browserslist

A page to display compatible browsers from browserslist string.

https://browserslist.dev/?q=PiAuNSUgYW5kIGxhc3QgMiB2ZXJzaW9ucw==

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 Jul 8, 2024

unified

Content as structured data: unified compiles content and provides hundreds of packages to work with content

https://unifiedjs.com/

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

Overview | Tooling.Report

A quick and easy way to figure out what the best tool for your next project is, if it’s worth your time to migrate from one tool to another and how to adopt a best practice into your existing code base. Brought to you by web.dev

https://bundlers.tooling.report/