Build Plugin Stark Module

2.3.0 · active · verified Sun Apr 19

build-plugin-stark-module is a build-scripts plugin specifically designed for integrating applications as 'stark modules' within the icestark micro-frontend framework, developed by Alibaba. As of version 2.3.0, this plugin facilitates the build process by allowing developers to configure multiple entry points, optimize module loading performance through external dependencies (similar to Webpack externals), and customize output filenames and minification settings. It primarily functions by extending the build configuration of `@ice/app` or `build-scripts`, where it's specified in the `build.json` file rather than being imported directly into application code. Its stable release cadence is not explicitly stated but appears to follow the larger Ice.js ecosystem's development. Key differentiators include its tight integration with icestark for micro-frontend architectures and its focus on build-time optimizations for such modules.

Warnings

gotcha This plugin is configured within a `build.json` file as part of the `build-scripts` ecosystem, not imported directly into JavaScript/TypeScript files. Attempts to `import` or `require` it in application code will fail.
Fix: Ensure configuration is placed in `build.json` within the `plugins` array as a string array: `["build-plugin-stark-module", {...options}]`.
gotcha The `moduleExternals` option requires careful configuration of `root` and `url` properties to correctly map global variables and their CDN paths for optimized micro-module loading. Incorrect paths or root names will lead to runtime errors when the micro-frontend attempts to load shared dependencies.
Fix: Verify that `root` matches the global variable exposed by the external script (e.g., 'React' for React UMD builds) and `url` points to the correct, accessible CDN path for the dependency.
gotcha The `outputDir`, `filenameStrategy`, `minify`, and `sourceMap` options override or complement the global build configurations. Misalignment between these plugin-specific options and overall project build settings can lead to unexpected output structures or performance characteristics.
Fix: Review the documentation for your specific `build-scripts` version and the `build-plugin-stark-module` to ensure that plugin-specific options are correctly integrated with the global build configuration, especially regarding output paths and asset handling.

Install

npm install build-plugin-stark-module npm
yarn add build-plugin-stark-module yarn
pnpm add build-plugin-stark-module pnpm

Quickstart

Demonstrates how to configure build-plugin-stark-module in a build.json file, setting up multi-module entries and external dependencies.

{
  "plugins": [
    ["build-plugin-stark-module", {
      "outputDir": "./build",
      "modules": {
        "branch-detail": "./src/branch-detail/index.tsx",
        "edit-info": "./src/edit-info/index.tsx"
      },
      "moduleExternals": {
        "react": {
          "root": "React",
          "url": "https://g.alicdn.com/code/lib/react/16.14.0/umd/react.production.min.js"
        },
        "react-dom": {
          "root": "ReactDOM",
          "url": "https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.production.min.js"
        }
      },
      "filenameStrategy": "./[name]/index",
      "minify": true,
      "sourceMap": false
    }]
  ]
}

view raw JSON →