@pisell/rsbuild-plugin-lowcode

@pisell/rsbuild-plugin-lowcode

@pisell/rsbuild-plugin-lowcode 是一个面向低代码物料场景的 Rsbuild 插件，提供：

• dev 阶段本地调试与入口热更新
• build 阶段多环境并行编译
• 调试模式：支持将本地组件注入到线上低代码引擎进行实时调试

安装

pnpm add -D @pisell/rsbuild-plugin-lowcode

同时请确保工程中已安装并配置 @rsbuild/core。

使用方式

在 rsbuild.config.js/ts 中注册插件：

import { defineConfig } from '@rsbuild/core';
import { pluginLowcode } from '@pisell/rsbuild-plugin-lowcode';

export default defineConfig({
  plugins: [
    pluginLowcode({
      library: 'PrivateMaterials',
      engineScope: '@alilc',
      lowcodeDir: 'lowcode',
      buildTarget: 'build',
    }),
  ],
});

更完整示例见：examples/rsbuild.config.js。

自定义 PostCSS

插件默认会为样式添加 #body 选择器前缀。若需要自行控制 PostCSS 插件列表，可以在 Rsbuild 顶层配置 tools.postcss，或传入 pluginLowcode({ tools: { postcss } })。插件参数里的 tools.postcss 优先，插件不会重复注入。

import addRootSelector from 'postcss-add-root-selector';

export default defineConfig({
  plugins: [
    pluginLowcode({
      tools: {
        postcss: (_, { addPlugins }) => {
          addPlugins([
            {
              postcssPlugin: 'lowcode-root-selector',
              Once(root, helpers) {
                const from = root.source?.input?.file || helpers.result?.opts?.from || '';
                if (/pisell-materials\.tw\.css$/.test(from)) {
                  return;
                }
                const plugin = addRootSelector({
                  rootSelector: '#body',
                });
                return plugin.Once?.(root, helpers);
              },
            },
          ]);
        },
      },
    }),
  ],
});

Alt 调试模式

Alt 调试模式允许你在开发组件时，将本地正在开发的组件实时注入到线上低代码引擎中进行调试，无需发布即可测试组件效果。

配置

export default defineConfig({
  server: {
    port: 3000,  // dev server 端口
    https: true, // 线上 HTTPS 设计器调试时建议开启，供 HMR 使用 wss://
  },
  plugins: [
    pluginLowcode({
      library: 'MyComponent',
      
      // Alt 调试模式配置
      alt: {
        enabled: true,              // 启用 alt 调试模式
        port: 8899,                 // inject server 端口（默认 8899）
        openBrowser: true,          // 自动打开浏览器（默认 true）
        openUrl: 'https://lowcode-engine.cn/demo/demo-general/index.html?debug',
        usePrivateIp: false,        // 使用内网 IP（默认 false，使用 127.0.0.1）
      },
    }),
  ],
});

配置项说明

配置项	类型	默认值	说明
alt.enabled	boolean	false	是否启用 alt 调试模式
alt.port	number	8899	inject server 监听端口
alt.openBrowser	boolean	true	是否自动打开浏览器
alt.openUrl	string	https://lowcode-engine.cn/demo/demo-general/index.html?debug	自动打开的 URL
alt.usePrivateIp	boolean	false	是否使用内网 IP（用于跨设备调试）

目录结构

.
├── index.js             # 包入口
├── src/                 # 所有功能代码与模板资源
│   ├── plugin.js
│   ├── environments.js
│   ├── logger.js
│   ├── constants.js
│   ├── entries.js
│   ├── assets.js
│   ├── inject/          # Alt 调试模式
│   │   ├── bootstrap.js # Alt 模式启动编排
│   │   ├── server.js    # Inject server (原生 http)
│   │   ├── registry.js  # 注册信息管理
│   │   └── utils.js     # 工具函数
│   ├── utils/
│   ├── templates/
│   └── public/
├── examples/            # 示例配置
├── README.md
└── package.json