@cqsjjb/scripts

基于 Rspack 的微应用构建工具，提供开发服务器、生产构建和静态资源服务等功能。

环境要求

• Node.js >= 14.0.0

安装

npm i @cqsjjb/scripts -d

快速开始

1. 创建配置文件

在项目根目录创建 jjb.config.js 配置文件：

module.exports = {
  // 微应用标识（用于打包文件夹名称和路由前缀）
  appIdentifier: 'your-app-name',
  
  // 开发服务器配置
  server: {
    port: '8080',
    host: '0.0.0.0',
    open: true,
    https: false,
    headers: {}
  },
  
  // 静态资源服务器配置
  www: {
    port: 8566,
    host: 'localhost',
    cors: '*',
    static: 'dist'
  },
  
  // 框架配置（Ant Design）
  framework: {
    less: {},
    antd: {
      'ant-prefix': 'ant',
      'fontFamily': '',
      'colorPrimary': '',
      'borderRadius': ''
    }
  },
  
  // 环境配置
  environment: {
    development: {
      API_HOST: 'http://localhost:3000'
    },
    production: {
      API_HOST: 'https://api.example.com'
    }
  },
  
  // HTML 模板注入配置
  windowInject: {
    title: '应用标题',
    links: [],
    element: {
      root: {
        id: 'root'
      }
    },
    scripts: []
  },
  
  // 应用内部注入配置
  contextInject: {
    notRouter: false
  },
  
  // Rspack 配置（兼容 Webpack 格式）
  webpackConfig: {
    entry: 'src/main.js',
    output: {
      path: 'dist',
      publicPath: '/'
    },
    resolve: {
      alias: {}
    },
    externals: {},
    module: {
      rules: []
    },
    plugins: [],
    optimization: {}
  }
};

2. 配置 package.json scripts

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node node_modules/@cqsjjb/scripts/rspack.dev.server.js",
    "build": "cross-env NODE_ENV=production node node_modules/@cqsjjb/scripts/rspack.build.js",
    "www": "node node_modules/@cqsjjb/scripts/www.js"
  }
}

3. 运行命令

# 开发模式（启动开发服务器）
npm run dev

# 生产构建
npm run build

# 启动静态资源服务器（用于预览构建产物）
npm run www

功能特性

• ✅ 基于 Rspack 构建，性能优异
• ✅ 支持 React + TypeScript 开发
• ✅ 支持 Less 样式预处理
• ✅ 开发模式热更新（HMR）
• ✅ 生产模式代码优化
• ✅ 微前端应用支持
• ✅ 环境变量注入
• ✅ HTML 模板自定义注入
• ✅ Ant Design 主题配置

配置说明

server（开发服务器配置）

| 字段 | 类型 | 说明 | 默认值 | |------|------|------|--------| | port | string | 开发服务器端口 | '8080' | | host | string | 开发服务器主机 | '0.0.0.0' | | open | boolean | 是否自动打开浏览器 | false | | https | object | HTTPS 配置 | false | | headers | object | 自定义响应头 | {} |

www（静态资源服务器配置）

| 字段 | 类型 | 说明 | 默认值 | |------|------|------|--------| | port | number | 服务器端口 | 8566 | | host | string | 服务器主机 | 'localhost' | | cors | string | CORS 配置 | '*' | | static | string | 静态资源目录 | 'dist' |

framework（框架配置）

用于配置 Ant Design 主题变量和 Less 变量。

environment（环境配置）

根据 NODE_ENV 自动选择对应的环境配置，支持 development 和 production。

webpackConfig（Rspack 配置）

兼容 Webpack 配置格式，支持自定义入口、输出、解析、外部依赖、模块规则、插件和优化配置。

注意事项

1. 必须在项目根目录创建 jjb.config.js 配置文件
2. 运行构建命令前需要设置 NODE_ENV 环境变量
3. appIdentifier 字段必填，用于生成打包文件夹名称和微前端路由前缀
4. environment 字段必须包含对应环境的配置对象

License

MIT