Build Plugin Component Multiple

1.0.0-beta.53 verified Sat May 09 auth: no javascript

build-plugin-component-multiple is a build plugin for component development, currently at version 1.0.0-beta.53, with rapid beta releases. It extends build-plugin-component to support multiple component entries and outputs in a single build, differentiating itself by enabling monorepo-style component libraries without separate packages. It is primarily used with build-scripts and React component development.

Common errors

error Cannot find module 'build-plugin-component-multiple' ↓

cause Package not installed or typo in package name.

fix

Run npm install --save-dev build-plugin-component-multiple

error TypeError: buildPluginComponentMultiple is not a function ↓

cause Attempted to use default import as a named import, or wrong import style.

fix

Use import buildPluginComponentMultiple from 'build-plugin-component-multiple'

Warnings

breaking In v1.0.0-beta.30, the plugin API changed: now requires build-scripts >= 2.0.0. ↓

fix Upgrade to build-scripts@2 or later.

Install

npm install build-plugin-component-multiple

yarn add build-plugin-component-multiple

pnpm add build-plugin-component-multiple

Imports

default

wrong

const buildPluginComponentMultiple = require('build-plugin-component-multiple')

correct

import buildPluginComponentMultiple from 'build-plugin-component-multiple'

The package is ESM-only since v1.0.0-beta.1; CommonJS require may fail in modern Node versions.

BabelPluginReplaceStyles

wrong

import BabelPluginReplaceStyles from 'build-plugin-component-multiple'

correct

import { BabelPluginReplaceStyles } from 'build-plugin-component-multiple'

BabelPluginReplaceStyles is a named export, not default.

defineConfig
```
import { defineConfig } from 'build-plugin-component-multiple'
```
defineConfig is a helper for TypeScript projects to get type hints.

Quickstart

This shows how to set up the plugin to build multiple components from a single project.

import buildPluginComponentMultiple from 'build-plugin-component-multiple';

export default {
  plugins: [
    buildPluginComponentMultiple()
  ],
  // component config
  component: {
    entries: {
      'button': './src/button/index.tsx',
      'dialog': './src/dialog/index.tsx'
    }
  }
};