Mako

https://makojs.dev/docs
Admin
Mako is an extremely fast, production-grade web bundler built in Rust, leveraging data-parallelism...
Tokens:15,412
Snippets:81
Trust Score:6.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Development Tools

Source: https://makojs.dev/docs/contributing

Installs necessary development tools like 'just' and 'cargo-binstall' using Cargo.

```shell
cargo install just
cargo install cargo-binstall
```

--------------------------------

### Create Mako Project with React

Source: https://makojs.dev/docs/getting-started

Guides through creating a new Mako.js project, likely pre-configured for React. It includes commands to start the development server and build for production.

```bash
$ npm create mako

$ cd mako-project
$ npm run dev
Building with mako for development...
✓ Built in 101ms

$ npm run build
Building with mako for production...
dist/index.js       144.68 kB │ map: 354.22 kB
✓ Built in 96ms
Complete!
```

--------------------------------

### Run Tests

Source: https://makojs.dev/docs/contributing

Installs Playwright dependencies if needed and runs all project tests using 'just test'. It also shows how to run specific test cases.

```shell
pnpm playwright install # only need to run before the first time
just test
# test specified testcase
cargo nextest run transformers::transform_try_resolve::tests
```

--------------------------------

### Zero Configuration in Mako

Source: https://makojs.dev/docs/features

Mako's zero-configuration approach allows developers to start bundling immediately with minimal setup. It automatically supports a wide range of file types and technologies.

```javascript
// Start with a JS/TS file, and Mako will handle the rest.
// Supports TypeScript, Less, CSS, CSS Modules, React, Images, Fonts, WASM, Node Polyfill out of the box.
// No need to configure loaders, plugins, or anything else.
// Example: mako build ./src/index.js
```

--------------------------------

### Install Mako

Source: https://makojs.dev/docs/getting-started

Installs Mako.js as a development dependency using npm or pnpm. After installation, Mako can be executed using npx.

```bash
$ npm i @umijs/mako -D
```

--------------------------------

### Mako Configuration Example

Source: https://makojs.dev/docs/faq

An example of how to configure Mako to output build statistics, which can be used for manual HTML file generation.

```json
{
  "stats": {
  }
}
```

--------------------------------

### Install Mako CLI

Source: https://makojs.dev/docs/api

Installs the Mako package using npm. This is a prerequisite for using the Mako API programmatically.

```bash
$ npm i @umijs/mako
```

--------------------------------

### Run Mako Version

Source: https://makojs.dev/docs/getting-started

Checks the installed version of Mako.js by running it with the -v flag.

```bash
$ npx mako -v
```

--------------------------------

### Prepare for Push

Source: https://makojs.dev/docs/contributing

Runs a 'ready' script using 'just' to ensure the project is prepared before committing changes.

```shell
just ready
```

--------------------------------

### Mako Configuration Example

Source: https://makojs.dev/docs/config

Demonstrates how to create a mako.config.json file to configure Mako's build process, specifying entry points.

```json
{
  "entry": {
    "index": "./src/index.js"
  }
}
```

--------------------------------

### Mako CLI Usage

Source: https://makojs.dev/docs/features

Examples of using the Mako.js command-line interface for building projects and watching for changes.

```bash
$ npm i @umijs/mako -D
$ npx mako -h
Mako vX.X.X
Usage: mako <command> [options]
Commands:
  build
Options:
  --help,-h
  --version,-v
Examples:
  mako build
  mako -v
```

```bash
$ npx mako build --watch
```

--------------------------------

### Clone Mako Repository

Source: https://makojs.dev/docs/contributing

Clones the Mako repository from GitHub and navigates into the project directory.

```shell
git clone git@github.com:umijs/mako.git
cd mako
```

--------------------------------

### Compile Mako

Source: https://makojs.dev/docs/contributing

Compiles the Mako project in both debug and release modes using Cargo.

```shell
cargo build
cargo build --release
```

--------------------------------

### Format Code

Source: https://makojs.dev/docs/contributing

Formats the codebase using the 'just fmt' command, ensuring consistent code style.

```shell
just fmt
```

--------------------------------

### Mako.js React Automatic Runtime Example

Source: https://makojs.dev/docs/config

Provides an example of React code compiled with Mako.js using the automatic JSX runtime. It shows the generated import statement and the transformed JSX syntax.

```javascript
import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return /*#__PURE__*/ _jsx("div", {
    children: "1",
  });
}
```

--------------------------------

### Lint Code

Source: https://makojs.dev/docs/contributing

Runs the linter using the 'just lint' command to check for code quality and potential issues.

```shell
just lint
```

--------------------------------

### Mako.js Provider Configuration Example

Source: https://makojs.dev/docs/config

Demonstrates how to configure providers in Mako.js to replace identifiers in the code with require module identifiers. This is useful for aliasing modules or providing global variables.

```javascript
{
  providers: {
    process: ["process", ""],
    Buffer: ["buffer", "Buffer"],
  },
}
```

--------------------------------

### Build JavaScript Packages

Source: https://makojs.dev/docs/contributing

Builds the JavaScript packages for Mako, including the core 'mako' package, using pnpm.

```shell
pnpm build
```

--------------------------------

### Upgrade Dependencies

Source: https://makojs.dev/docs/contributing

Upgrades project dependencies using 'cargo upgrade', with options for incompatible upgrades and dry runs.

```shell
cargo upgrade
cargo upgrade --incompatible
cargo upgrade --dry-run
```

--------------------------------

### Check Umi Version

Source: https://makojs.dev/docs/getting-started

Verifies that Umi version 4.2.0 or higher is installed, which is required for Mako integration.

```bash
$ npx umi -v
4.2.0
```

--------------------------------

### Mako Build API Usage

Source: https://makojs.dev/docs/features

Example of programmatically using the Mako.js build API within a Node.js environment.

```javascript
const { build } = require('@umijs/mako');
await build({
  root: process.cwd(),
  watch: false,
  config: {},
});
```

--------------------------------

### Mako.js React Classic Runtime Example

Source: https://makojs.dev/docs/config

Demonstrates React code compiled with Mako.js using the classic JSX runtime. This output uses `React.createElement` for JSX transformation.

```javascript
function App() {
  return /*#__PURE__*/ React.createElement("div", null, "1");
}
```

--------------------------------

### Run Mako

Source: https://makojs.dev/docs/contributing

Runs the Mako CLI with different options: default, with hot module replacement (HMR), and in production mode.

```shell
cargo run --bin mako examples/normal
# with HMR
cargo run --bin mako examples/normal --watch
# in production
cargo run --bin mako examples/normal --mode production
```

--------------------------------

### MakoJS Sass Configuration

Source: https://makojs.dev/docs/config

Configures Sass compilation options. This allows customization of Sass processing, such as enabling or disabling source maps. Ensure the 'sass' package is installed (`npm install sass`).

```json
{
  "sourceMap": false
}
```

--------------------------------

### Generate Code Coverage

Source: https://makojs.dev/docs/contributing

Generates code coverage reports using 'cargo codecov', including an HTML report that can be opened in a browser.

```shell
cargo codecov
cargo codecov --html && open target/llvm-cov/html/index.html
```

--------------------------------

### Mako.js px2rem Selector Blacklist Example

Source: https://makojs.dev/docs/config

Illustrates how to use regular expressions or strings within the `selectorBlackList` option for px2rem conversion in Mako.js. This allows for more granular control over which selectors are excluded from conversion.

```javascript
"selectorBlackList": [".a", "/.__CustomClass_/"]
```

--------------------------------

### Create First Mako Bundle

Source: https://makojs.dev/docs/getting-started

Demonstrates creating a new project directory, adding a source file, and building the bundle using Mako.js. It shows the build output and how to run the generated bundle.

```bash
$ mkdir my-app && cd my-app
$ mkdir src
$ echo "console.log('Hello Mako!')" > src/index.ts

$ npx mako build
Building with mako for development...
dist/index.js       7.04 kB │ map: 8.87 kB
✓ Built in 20ms
Complete!

$ node dist/index.js
Hello Mako!
```

--------------------------------

### Build Project with Mako

Source: https://makojs.dev/docs/getting-started

Demonstrates the build process using `umi build` after Mako has been configured. Includes output logs showing Mako's involvement and build performance.

```bash
$ umi build
info  - [plugin: @umijs/preset-umi/dist/features/mako/mako] Using mako@0.4.15
warn  - [plugin: @umijs/preset-umi/dist/features/mako/mako] Mako is an extremely fast, production-grade web bundler based on Rust. And it's still under active development and is not yet ready for production use. If you encounter any issues, please checkout https://makojs.dev/ to join the community and report the issue.
info  - Umi v4.2.0
info  - Preparing...
Building with mako for production...
dist/umi.css         0.07 kB │ map: 0.19 kB
dist/umi.js        696.36 kB │ map: 1.33 mB
✓ Built in 314ms
Complete!
info  - Memory Usage: 120.76 MB (RSS: 413.55 MB)
event - Build index.html
```

--------------------------------

### Mako Build API

Source: https://makojs.dev/docs/api

Demonstrates how to use the 'build' function from the '@umijs/mako' package to build a project. It includes basic configuration for the build process.

```javascript
const { build } = require('@umijs/mako');
await build({
  root: process.cwd(),
  watch: false,
  config: {},
});
```

--------------------------------

### Mako API - Build

Source: https://makojs.dev/docs/feedback

Details on the 'build' API for Mako, likely used for bundling projects. Further specifics on parameters and return values would be needed for a complete description.

```APIDOC
Build:
  Description: Initiates the build process for a Mako project.
  Usage: mako build [options]
  Options:
    --config, -c: Specify a custom configuration file.
    --outdir, -o: Set the output directory for the build.
    --watch, -w: Enable watch mode for continuous rebuilding.
  Example:
    mako build --outdir dist --watch
```

--------------------------------

### Mako Build API

Source: https://makojs.dev/docs/getting-started

Documentation for the Mako build command. It outlines the process of building bundles for development and production, including output size and build times.

```APIDOC
Mako Build Command:

Usage:
  npx mako build [options]

Description:
  Builds the project using Mako.js. Can be used for development or production builds.

Development Build Example:
  $ npx mako build
  Output:
    Building with mako for development...
    dist/index.js       7.04 kB │ map: 8.87 kB
    ✓ Built in 20ms
    Complete!

Production Build Example:
  $ npx mako build --production
  Output:
    Building with mako for production...
    dist/index.js       144.68 kB │ map: 354.22 kB
    ✓ Built in 96ms
    Complete!

Options:
  --production, -p: Build for production.
  --outdir <dir>: Specify the output directory (default: dist).
  --sourcemap [true|false]: Enable or disable sourcemaps (default: true for dev, false for prod).

Related Commands:
  npx mako dev: Starts a development server with hot module replacement.
```

--------------------------------

### Mako Build Options

Source: https://makojs.dev/docs/api

Details the available options for the Mako 'build' function, including 'root', 'config', and 'watch'. These options allow customization of the build process.

```APIDOC
build(options)
  - Builds the project programmatically.

Options:
  root: string
    - Description: The root directory of the project.
    - Default: process.cwd()

  config: object
    - Description: Configuration object for Mako. See [config](https://makojs.dev/docs/config) for details.
    - Default: {}

  watch: boolean
    - Description: Enables watching for file changes and automatic recompilation.
    - Default: false
```

--------------------------------

### Mako API - Build Command

Source: https://makojs.dev/docs/index

The 'build' command in Mako is used to bundle your project. It handles the entire build process, optimizing assets for production.

```APIDOC
API:
  build
    Description: Bundles the project for production.
    Usage: mako build
    Options:
      --config <path>  Specify a custom configuration file.
      --outdir <path>  Specify the output directory for the build.
      --watch          Enable watch mode for continuous rebuilding.
    Example:
      mako build --outdir dist --watch
```

--------------------------------

### Umi Configuration with Mako

Source: https://makojs.dev/docs/getting-started

Shows the resulting configuration in `.umirc.ts` or `config/config.ts` after enabling Mako.

```typescript
export default {
+   mako: {},
};
```

--------------------------------

### Mako Features Overview

Source: https://makojs.dev/docs/features

This section provides a high-level overview of Mako's core features, highlighting its strengths in zero configuration, production readiness, speed, and hot module replacement.

```APIDOC
Mako Features:
  - Zero Config: Start with a JS/TS file, Mako handles the rest. Supports TypeScript, Less, CSS, CSS Modules, React, Images, Fonts, WASM, Node Polyfill out of the box.
  - Production Grade: Reliable, used in hundreds of projects at Ant Group. Tested for compatibility with old projects and npm packages.
  - Blazing Fast: Core bundling logic in Rust, uses Node.js workers with piscina for parallel compilation. Faster than other Rust bundlers and Webpack in benchmarks.
  - Hot Module Replacement (HMR): Automatic code updates in the browser without manual refresh. Integrated with React Fast Refresh for component-level updates.
```

--------------------------------

### MakoJS Configuration API

Source: https://makojs.dev/docs/config

API documentation for MakoJS configuration options.

```APIDOC
less:
  Type: { modifyVars?: Record<string, string>, globalVars?: Record<string, string>, sourceMap?: { sourceMapFileInline?: boolean, outputSourceFiles?: boolean }, math?: "always" | "strict" | "parens-division" | "parens" | "strict-legacy" | number, plugins?: ([string, Record<string, any>]|string)[] }
  Default: {}
  Description: Specify the less configuration.

manifest:
  Type: false | { fileName?: string, basePath?: string }
  Default: false
  Description: Whether to generate the `manifest.json` file. When enabled, the default value of `fileName` is `asset-manifest.json`.

mdx:
  Type: boolean
  Default: false
  Description: Whether to enable `mdx` support.

minify:
  Type: boolean
  Default: mode will be `false` when mode is development, and `true` when mode is production
  Description: Whether to minify the code.

mode:
  Type: "development" | "production"
  Default: "development"
  Description: Specify the build mode, `"development"` or `"production"`.

moduleIdStrategy:
  Type: "named" | "hashed" | "numeric"
  Default: "named" when mode is development, "hashed" when mode is production
  Description: Specify the strategy for generating moduleId.

nodePolyfill:
  Type: boolean
  Default: true, and `false` when platform is `node`
  Description: Whether to enable node polyfill.

output:
  Type: { path: string, mode: "bundle" | "bundless", esVersion: "es3" | "es5" | "es2015" | "es2016" | "es2017" | "es2018" | "es2019" | "es2020" | "es2021" | "es2022" | "esnext", meta: boolean, chunkLoadingGlobal: string, preserveModules: boolean, preserveModulesRoot: string; crossOriginLoading: false | "anonymous" | "use-credentials" }
  Default: { path: "dist", mode: "bundle", esVersion: "es2022", meta: false, chunkLoadingGlobal: "", preserveModules: false, preserveModulesRoot: "", crossOriginLoading: false }
  Description: Output related configuration.
    * `path`, output directory
    * `mode`, output mode, `"bundle"` or `"bundless"`, default is `"bundle"`
    * `esVersion`, output `js` version (Bundless Only)
    * `meta`, whether to generate `meta.json` file (Bundless Only)
    * `chunkLoadingGlobal`, global variable name for `chunk loading`
    * `preserveModules`, whether to preserve the module directory structure (Bundless Only)
    * `preserveModulesRoot`, preserve the root directory of the module directory structure (Bundless Only)
    * `crossOriginLoading`, control the `crossorigin` attribute of the `script` tag and `link` tag for load async chunks
    * `globalModuleRegistry`, whether enable shared module registry across multi entries

optimization:
  Type: object
  Default: { skipModules: true, concatenateModules: true }
  Description: Specify the configuration to optimize the build artifacts. Currently, the following sub-configuration items are supported.
    * `skipModules`, optimize the size by skipping modules without side effects
    * `concatenateModules`, optimize the size by concatenating a group of modules that can be safely merged on the found module tree into one module

platform:
  Type: "browser" | "node"
  Default: "browser"
  Description: Specify the platform to build, `"browser"` or `"node"`.
  Notice: When using `"node"`, you also need to set `dynamicImportToRequire` to `true`, because the runtime does not yet support node-style chunk loading.
```

--------------------------------

### Specify Entry Files

Source: https://makojs.dev/docs/config

Defines the entry points for the MakoJS application. Multiple entry files can be specified, each corresponding to a different part of the application or a separate build output.

```javascript
{
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },
}
```

--------------------------------

### Mako API - Build Command

Source: https://makojs.dev/docs/why-mako

Details on the 'build' command within the Mako API, likely used for bundling projects.

```APIDOC
API Documentation:

Build:
  Description: Bundles the project for production.
  Usage: mako build [options]
  Options:
    --config <path>  Specify a custom configuration file path.
    --outDir <path>  Specify the output directory for the build.
    --watch          Enable watch mode for continuous rebuilding.
  Example:
    mako build --outDir dist --watch
```

--------------------------------

### Configure Mako in Umi

Source: https://makojs.dev/docs/getting-started

Adds the Mako bundler to your Umi project by setting the 'mako' field in the Umi configuration file.

```bash
$ npx umi config set mako {}
```

--------------------------------

### Mako Configuration Items

Source: https://makojs.dev/docs/config

Details various configuration options available for Mako, including analyze, autoCSSModules, clean, and cjs.

```APIDOC
analyze:
  Type: "{} | false"
  Default: "false"
  Description: "Whether to analyze the build artifacts. (WIP)"

autoCSSModules:
  Type: "boolean"
  Default: "false"
  Description: "Whether to automatically enable CSS Modules. If enabled, named imports from CSS/Less files are treated as CSS Modules."

clean:
  Type: "boolean"
  Default: "true"
  Description: "Whether to clean the output directory before building."

cjs:
  Type: "boolean"
  Default: "false"
  Description: "Whether to output code in CommonJS (CJS) format."
```

--------------------------------

### Mako Core Features

Source: https://makojs.dev/docs/index

Mako is built in Rust for performance and safety, leveraging data-parallelism and caching for efficient bundling. It's production-ready and designed for ease of use with zero configuration, while remaining compatible with frameworks like Umi.

```rust
Mako is built in Rust, which is known for its performance and safety. Mako takes advantage of [data-parallelism](https://crates.io/crates/rayon) and [caching](https://crates.io/crates/cached) features to provide fast and efficient bundling.
```

--------------------------------

### Less Configuration

Source: https://makojs.dev/docs/config

Configuration for Less CSS pre-processor. Allows specifying variable modifications, global variables, source map settings, math rendering mode, and Less plugins.

```javascript
{
  modifyVars: {
    'primary-color': '#1DA57A',
    'link-color': '#1DA57A',
  },
  globalVars: {
    'primary-color': '#ffff00',
    hack: 'true; @import "your-global-less-file.less";',
  },
  sourceMap: {
    sourceMapFileInline: true,
    outputSourceFiles: true,
  },
  math: 'always',
  plugins: [
    [require.resolve("less-plugin-clean-css"), { roundingPrecision: 1 }]
  ],
}
```

--------------------------------

### Experimental Detect Loop Configuration

Source: https://makojs.dev/docs/config

Configure experimental loop detection for dependencies. Can ignore node_modules and generate Graphviz DOT files for visualization.

```json
{
  "experimental": {
    "ignoreNodeModules": false,
    "graphviz": true
  }
}
```

--------------------------------

### Mako Plugin Configuration

Source: https://makojs.dev/docs/features

Shows how to configure and use custom plugins in Mako.js by referencing them in the project's configuration file.

```json
{
  "plugins": [
    "require.resolve('./my-plugin')",
  ]
}
```

--------------------------------

### Mako.js Configuration for Code Splitting

Source: https://makojs.dev/docs/features

Shows how to configure code splitting strategies in Mako.js. Options include 'auto', 'granular', and 'advanced' for customizing bundle splitting behavior.

```json
{
  "codeSplitting": {
    "strategy": "granular" 
  }
}
```

--------------------------------

### MakoJS Configuration Schema

Source: https://makojs.dev/docs/config

Defines the structure and types for MakoJS configuration options, including resolve, rscClient, rscServer, sass, stats, transformImport, umd, useDefineForClassFields, watch, and writeToDisk.

```APIDOC
resolve:
  type: { alias: Array<[string, string]>, extensions: string[] }
  default: { alias: [], extensions: ["js", "jsx", "ts", "tsx"] }
  description: Alias configuration and file extensions configuration.

rscClient:
  type: { logServerComponent: 'error' | 'ignore' } | false
  default: false
  description: Configuration related to RSC client.

rscServer:
  type: { clientComponentTpl: string, emitCSS: boolean } | false
  default: false
  description: Configuration related to RSC server.
  child_configuration:
    clientComponentTpl: Client component template, use {{path}} for component path and {{id}} for module ID.
    emitCSS: Whether to output CSS components.

sass:
  type: Options<'async'>
  default: {}
  description: Specify Sass configuration. Ensure 'sass' package is installed.

stats:
  type: { modules: bool } | false
  default: false
  description: Whether to generate stats.json file.
  child_configuration:
    modules: Whether to generate module information.

transformImport:
  type: false | { libraryName: string, libraryDirectory: string, style: boolean }
  default: false
  description: Simplified babel-plugin-import for on-demand loading (e.g., antd v4 styles).

umd:
  type: false | string
  default: false
  description: Whether to output umd format.

useDefineForClassFields:
  type: boolean
  default: true
  description: Whether to use `defineProperty` to define class fields.

watch:
  type: { ignorePaths: string[] } | false
  default: { ignorePaths: [] }
  description: Watch related configuration, specify paths to ignore.

writeToDisk:
  type: boolean
  default: true
  description: Whether to write the build result to disk when mode is development.
```

--------------------------------

### Dynamic Imports for Code Splitting

Source: https://makojs.dev/docs/features

Demonstrates how to use dynamic imports to split code into separate bundles, improving initial load times. This is a core feature for optimizing application performance.

```javascript
import('./module').then(module => {
  console.log(module);
});
```

--------------------------------

### Experimental Require Context Configuration

Source: https://makojs.dev/docs/config

Enable or disable the webpack require.context feature experimentally.

```json
{
  "experimental": {
    "requireContext": false
  }
}
```

--------------------------------

### Node.js Platform Configuration

Source: https://makojs.dev/docs/features

Configures Mako.js to build for a Node.js environment. Setting `platform` to 'node' and `dynamicImportToRequire` to true is necessary for Node.js compatibility.

```json
{
  "platform": "node",
  "dynamicImportToRequire": true
}
```

--------------------------------

### Experimental Magic Comment Support

Source: https://makojs.dev/docs/config

Enable experimental support for magic comments, similar to webpack, for code splitting and other optimizations.

```javascript
import(/* makoChunkName: 'myChunk' */ "./lazy");
import(/* webpackChunkName: 'myChunk' */ "./lazy");
new Worker(/* makoChunkName: 'myWorker' */ new URL("./worker", import.meta.url));
new Worker(/* webpackChunkName: 'myWorker' */ new URL("./worker", import.meta.url));
import(/* makoIgnore: true */ "./foo");
import(/* webpackIgnore: true */ "./foo");
```

--------------------------------

### MakoJS UMD Output Configuration

Source: https://makojs.dev/docs/config

Determines whether the project should output a UMD (Universal Module Definition) format bundle, which is compatible with various module systems and global environments.

```json
{
  "umd": "dist/my-library.umd.js"
}
```

```json
{
  "umd": "false"
}
```

--------------------------------

### Code Splitting - Granular Strategy

Source: https://makojs.dev/docs/config

Enables a granular code splitting strategy for SPAs, allowing explicit configuration of framework packages and minimum library sizes to be split into separate chunks. This provides more control over bundle optimization.

```javascript
{
  codeSplitting:  {
    strategy: "granular",
    options: {
      // Node modules those will be split to framework chunk
      frameworkPackages: [ "react", "antd" ],
      // (optional) The minimum size of the node module to be split
      libMinSize: 160000
    }
  }
}
```

--------------------------------

### MakoJS Write To Disk Configuration

Source: https://makojs.dev/docs/config

Determines whether the build output should be written to the disk during development mode. The default is `true`, ensuring build artifacts are saved.

```json
{
  "writeToDisk": false
}
```

--------------------------------

### External Dependencies Configuration

Source: https://makojs.dev/docs/config

Configure external dependencies to be replaced with global variables or require statements.

```json
{
  "externals": {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}
```

```json
{
  "externals": {
    "foo": "commonjs foo"
  }
}
```

--------------------------------

### CSS Modules Usage

Source: https://makojs.dev/docs/features

Demonstrates how to use CSS Modules in Mako.js by importing `.module.css` files and accessing class names.

```css
/* styles.module.css */
.container {
  color: red;
}
```

```javascript
import styles from './styles.module.css';
console.log(styles.container); // styles.container will be a string
```

--------------------------------

### Umi Integration Configuration

Source: https://makojs.dev/docs/features

This snippet shows how to configure MakoJS as the bundler for Umi 4 by adding the 'mako' field to the Umi configuration file.

```json
{
+   mako: {},
}
```

--------------------------------

### Ignores Configuration

Source: https://makojs.dev/docs/config

Specify files or patterns to be ignored during the build process. Ignored files will result in empty modules.

```json
{
  "ignores": [
    "^assert$",
    "xxxx.provider.js$",
    "^(node:)?({})(/|$)"
  ]
}
```

--------------------------------

### Code Analysis Configuration

Source: https://makojs.dev/docs/features

Enables Mako.js's built-in code analysis system to display module sizes and overall bundle size information.

```json
{
  "analyze": {}
}
```

--------------------------------

### Define Environment Variables

Source: https://makojs.dev/docs/config

Allows specifying variables to be replaced within the code during the build process. MakoJS automatically handles the `process.env` prefix for these variables.

```javascript
{
  define: {
    "FOO": "foo",
  },
}
```

--------------------------------

### MakoJS Stats Configuration

Source: https://makojs.dev/docs/config

Controls the generation of a `stats.json` file, which can be useful for analyzing module sizes and build performance. Enabling module information might slightly slow down the build process.

```json
{
  "stats": {
    "modules": true
  }
}
```

```json
{
  "stats": "false"
}
```

--------------------------------

### Convert Dynamic Import to Require

Source: https://makojs.dev/docs/config

Enables the conversion of dynamic `import()` statements to `require()` calls. This is useful for Node.js environments or when a single output JavaScript file is desired.

```javascript
import("./a.js");
// => require("./a.js")
```

--------------------------------

### Parallel Compilation with Piscina

Source: https://makojs.dev/docs/features

Mako leverages Rust for its core bundling logic and utilizes Node.js workers with the 'piscina' library for parallel file compilation, significantly boosting build performance.

```rust
// Core bundling logic is implemented in Rust for performance.
// Node.js workers are used with 'piscina' for parallel compilation.
// This approach ensures Mako is faster than many other bundlers.
```

--------------------------------

### Experimental Webpack Syntax Validation

Source: https://makojs.dev/docs/config

Specify packages allowed to use webpack syntax experimentally.

```json
{
  "experimental": {
    "webpackSyntaxValidate": ["foo", "bar"]
  }
}
```

--------------------------------

### MakoJS Transform Import Configuration

Source: https://makojs.dev/docs/config

Simplifies the process of on-demand loading for libraries like Ant Design v4. It supports configuring the library name, directory, and style import behavior, similar to `babel-plugin-import`.

```json
{
  "transformImport": {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": true
  }
}
```

```json
{
  "transformImport": "false"
}
```

--------------------------------

### TypeScript Configuration Notes

Source: https://makojs.dev/docs/features

Notes on using TypeScript with Mako.js, including unsupported features like `const enum` and configuration options for type checking and declaration emission.

```typescript
/* Mako won’t emit type declarations. If you want to do this, use `tsc --noEmit` instead. */
/* Mako won’t check types by default. If you want to do this, set [`forkTsChecker`](https://makojs.dev/docs/config#forktschecker) to true in the config, or use `tsc` instead. */
/* Mako don’t parse your `tsconfig.json` file. If you want to enable features like [`useDefineForClassFields`](https://makojs.dev/docs/config#usedefineforclassfields), you should set it in the config. */
```

--------------------------------

### MakoJS Resolve Configuration

Source: https://makojs.dev/docs/config

Configures module resolution by defining aliases for path mapping and specifying file extensions to look for during imports. Aliases can map directory paths or module names, and extensions help resolve modules without explicit file extensions.

```json
{
  "resolve": {
    "alias": [
      ["@", "./src"]
    ],
    "extensions": ["js", "jsx", "ts", "tsx"]
  }
}
```

```json
{
  "resolve": {
    "alias": [
      [ "@/src", "./src" ]
    ]
  }
}
```

```json
{
  "resolve": {
    "alias": [
      ["@/src", "./src"]
    ]
  }
}
```

--------------------------------

### Duplicate Package Checker Configuration

Source: https://makojs.dev/docs/config

Configures the duplicate package checker to identify and report duplicate dependencies in the project. Options include enabling verbose output, showing help messages, and emitting errors for duplicates.

```javascript
{
  "duplicatePackageChecker": {
    "verbose": true,
    "showHelp": true,
    "emitError": false
  }
}
```

--------------------------------

### Mako.js PublicPath Runtime Configuration

Source: https://makojs.dev/docs/config

Shows how to set the publicPath dynamically at runtime in Mako.js. The `"runtime"` special value enables this mode, and `__mako_public_path__` is used to assign the path.

```javascript
__mako_public_path__ = '/foo/';
```

--------------------------------

### Code Splitting - Advanced Strategy

Source: https://makojs.dev/docs/config

Implements an advanced code splitting strategy for Multi-Page Applications (MPAs). It allows fine-grained control over chunking through minimum sizes, group configurations, and priority settings, optimizing for different page requirements.

```javascript
{
  codeSplitting: {
    strategy: "advanced",
    options: {
      //（optional）The minimum size of the split chunk, async chunks smaller than this size will be merged into the entry chunk
      minSize: 20000,
      // Split chunk grouping configuration
      groups: [
        {
          // The name of the chunk group, currently only string values are supported
          name: "common",
          //（optional）The chunk type that the chunk group contains modules belong to, enum values are "async" (default) | "entry" | "all"
          allowChunks: "entry",
          //（optional）The minimum number of references to modules contained in the chunk group
          minChunks: 1,
          //（optional）The minimum size of the chunk group to take effect
          minSize: 20000,
          //（optional）The maximum size of the chunk group, exceeding this size will be automatically split again
          maxSize: 5000000,
          //（optional）The matching priority of the chunk group, the larger the value, the higher the priority
          priority: 0,
          //（optional）The matching regular expression of the chunk group
          test: "(?:)",
        }
      ],
    },
  }
}
```

--------------------------------

### Code Splitting - Auto Strategy

Source: https://makojs.dev/docs/config

Configures MakoJS to automatically determine the optimal code splitting strategy for Single Page Applications (SPAs). This is the simplest approach for code splitting.

```javascript
{
  codeSplitting: {
    strategy: "auto";
  }
}
```

--------------------------------

### Browser Target Configuration

Source: https://makojs.dev/docs/features

Specifies the target browsers for Mako.js compilation. Mako automatically adjusts code compatibility, including polyfills and helpers, for the defined targets.

```json
{
  "targets": {
    "chrome": 40,
    "ie": 11
  }
}
```

--------------------------------

### MakoJS Watch Configuration

Source: https://makojs.dev/docs/config

Configures file watching behavior during development. It allows specifying paths to ignore, preventing unnecessary rebuilds when certain files or directories change.

```json
{
  "watch": {
    "ignorePaths": ["foo"]
  }
}
```

```json
{
  "watch": "false"
}
```

--------------------------------

### Transform Dynamic Imports to Require

Source: https://makojs.dev/docs/features

Configuration option to transform dynamic imports into require statements, useful for specific build scenarios where dynamic imports are not directly supported.

```json
{
  "dynamicImportToRequire": true
}
```

--------------------------------

### MakoJS RSC Client Configuration

Source: https://makojs.dev/docs/config

Configures the behavior of React Server Components (RSC) on the client side. It allows specifying how server component logs should be handled, with options to report errors or ignore them.

```json
{
  "rscClient": {
    "logServerComponent": "error"
  }
}
```

```json
{
  "rscClient": "false"
}
```

--------------------------------

### Inline Excludes Extensions Configuration

Source: https://makojs.dev/docs/config

Define a list of asset file extensions that should not be converted to base64 format when inlining.

```json
{
  "inlineExcludesExtensions": ["webp"]
}
```

--------------------------------

### MakoJS RSC Server Configuration

Source: https://makojs.dev/docs/config

Configures the behavior of React Server Components (RSC) on the server side. It allows defining a template for client components and controlling whether CSS should be emitted.

```json
{
  "rscServer": {
    "clientComponentTpl": "// Component path: {{path}}\n// Module ID: {{id}}\nexport default function ClientComponent() { /* ... */ }",
    "emitCSS": true
  }
}
```

```json
{
  "rscServer": "false"
}
```

--------------------------------

### Mako.js JSHooks Plugin Definition

Source: https://makojs.dev/docs/config

Defines the structure for JSHooks, a set of functions used to extend Mako.js's compilation process. It includes hooks for build lifecycle events, file loading, and content transformation.

```javascript
{
  name?: string;
  enforce?: "pre" | "post";
  buildStart?: () => void;
  buildEnd?: () => void;
  generateEnd?: (data: {
    isFirstCompile: boolean;
    time: number;
    stats: {
      startTime: number;
      endTime: number;
      ...
    };
  }) => void;
  writeBundle?: () => void;
  watchChanges?: (id: string, params: { event: "create" | "delete" | "update" }) => void;
  load?: (filePath: string) => Promise<{ content: string, type: 'css'|'js'|'jsx'|'ts'|'tsx' }>;
  loadInclude?: (filePath: string) => boolean;
  resolveId?: (id: string, importer: string, { isEntry: bool }) => Promise<{ id: string, external: bool }>;
  transform?: (content: string, id: string) => Promise<{ content: string, type: 'css'|'js'|'jsx'|'ts'|'tsx' }>;
  transformInclude?: (filePath: string) => Promise<boolean> | boolean;
}
```

--------------------------------

### SVG as React Component Import

Source: https://makojs.dev/docs/features

Shows how to import SVG files as React components in Mako.js.

```javascript
import { ReactComponent as Logo } from './logo.svg';
```

--------------------------------

### Mako Plugin Interface

Source: https://makojs.dev/docs/features

Defines the interface for Mako.js plugins, outlining available hooks and their expected data structures.

```typescript
{
  name?: string;
  buildStart?: () => void;
  generateEnd?: (data: {
    isFirstCompile: boolean;
    time: number;
    stats: {
      startTime: number;
      endTime: number;
    };
  }) => void;
  load?: (filePath: string) => Promise<{ content: string, type: 'css'|'js'|'jsx'|'ts'|'tsx' }>;
}
```
Tokens:
Raw