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
.- In
.babeelrc.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
{ "browserslist": "ie >= 11" }
.browserslistrc
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
andregenerator-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
babel --plugins @babel/plugin-transform-arrow-functions src/index.js -d dist
Parse
const parser = require('@babel/parser'); const ast = parser.parse("const a =0;", { sourceType: 'unambiguous', plugins: ['jsx'] });
Â
babel-handbook
jamiebuilds • Updated Sep 3, 2024
Â
Â
Â
Webpack
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.// 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 }, ], }, };