@snack-kit/scripts

@snack-kit/scripts

Snack 模块打包脚手架，提供开发调试、生产打包、独立入口页面打包等命令。

安装

npm install @snack-kit/scripts --save-dev

命令

命令	说明
snack-scripts init [dir]	初始化新 snack 工程
snack-scripts create	在当前工程创建新模块模版
snack-scripts start	启动开发调试服务
snack-scripts build	生产模式打包
snack-scripts entry	打包独立入口页面

init — 初始化工程

# 在当前目录初始化
snack-scripts init

# 在指定目录初始化
snack-scripts init my-project

交互式提问：项目名、描述、作者、调试服务地址、入口页面 id/type。

生成文件：

my-project/
├── package.json
├── tsconfig.json
├── .gitignore
└── src/
    ├── env.d.ts
    └── package/       ← 模块目录

create — 创建模块

在 snack 工程根目录执行：

snack-scripts create

交互式提问：模块中文名、目录名（PascalCase）、描述、作者、是否生成 setting 模块。

生成文件（以 UserManager 为例）：

src/package/UserManager/
├── snack.json
├── index.ts
└── src/
    ├── index.tsx       ← 继承 Snack 基类
    ├── setting.tsx     ← 继承 SnackSetting 基类（可选）
    └── style/
        ├── index.scss
        └── setting.scss

{
  "scripts": {
    "start": "snack-scripts start",
    "build": "snack-scripts build",
    "entry": "snack-scripts entry"
  }
}

package.json 配置项

{
  "input": "./src/package",   // snack 模块目录，默认 "src/package"
  "output": "./dist",         // 生产输出目录，默认 "dist"
  "snack": {
    "externals": {},          // 同 webpack externals，过滤不打包的依赖
    "buildIgnore": [],        // 生产打包忽略的模块（模块目录名）
    "devPackage": [],         // 开发模式仅启动指定模块（模块目录名），空数组表示全部启动
    "entry": {                // 独立入口页面配置（snack-scripts entry 命令使用）
      "name": "entry",        // 输出目录名，默认 "entry"
      "id": "my_page",        // 所加载的页面 id
      "type": "portal",       // 所加载的页面分类（可选）
      "title": "My App",      // HTML 页面 title（可选）
      "favicon": "./favicon.ico", // 浏览器角标路径，相对项目根路径（可选）
      "service": "",          // snackbar 服务端地址，默认使用当前地址栏（可选）
      "devServer": "",        // 调试服务网关（可选）
      "mobile": {             // 移动端页面配置，竖屏或宽度 < 1024px 时加载（可选）
        "id": "my_page_mobile",
        "type": "portal"
      },
      "files": [],            // 需复制到发布目录的文件或目录路径（可选）
      "js": "./plugin.ts",    // 外挂打包的 JS/TS 文件路径（可选）
      "css": "./plugin.scss", // 外挂打包的 CSS/SCSS 文件路径（可选）
      "template": {           // 自定义 HTML 模板路径，相对项目根路径（可选）
        "index": "./public/index.html",
        "dev": "./public/dev.html",
        "entry": "./public/entry.html"
      }
    },
    "plugin": {               // snack 模块独立 index.html 外挂文件（可选）
      "js": "./plugin.ts",
      "css": "./plugin.scss"
    }
  }
}

config-overrides.js

在项目根目录创建 config-overrides.js 可自定义 webpack 配置：

module.exports = (config) => {
  // 修改 webpack 配置
  return config;
};

自定义模板

通过 --templatePath 参数指定自定义模板目录（需包含完整模板文件）：

{
  "scripts": {
    "start": "snack-scripts start --templatePath=template",
    "build": "snack-scripts build --templatePath=template",
    "entry": "snack-scripts entry --templatePath=template"
  }
}

Changelog

0.3.0

• 新增：调试窗口 topbar 视口尺寸切换（PC / Tablet / Mobile / 自定义），偏好持久化到 localStorage
• 新增：调试窗口 topbar 内容区背景切换（默认 / 白色 / 深色 / 棋盘格透明检测）
• 新增：调试窗口 topbar 内容区缩放控制（50% / 75% / 100% / 125% / 150%）
• 新增：调试窗口 topbar 刷新模块按钮，强制重新 mount 当前模块

0.2.0

• 新增：MIGRATION.md 迁移指南，说明从 @para-snack/* / @paraview/* 迁移到 @snack-kit/* 的完整步骤
• 新增：config/webpack.shared.js 共享 webpack 配置模块
• 重构：template/dev/index.tsx、template/entry/index.tsx、template/snack/index.tsx 模板文件更新，适配新包名

0.1.0

• 新增：snack-scripts init [dir] 命令，交互式初始化新 snack 工程
• 新增：snack-scripts create 命令，交互式在工程内创建模块模版
• 重构：开发调试页（Snack Developer）全新 UI，支持浅色/深色主题切换，偏好持久化到 localStorage
• 重构：提取共享 webpack 配置（webpack.shared.js），消除各配置文件重复代码
• 优化：生产构建 loader.js 与 entry HTML 改为并行执行，提升构建速度
• 替换：@paraview/lib → @snack-kit/lib，支持全量 {} 导出，移除子路径引用
• 替换：@para-snack/core → @snack-kit/core
• 修复：utils/fs.js 中 CcopyFile 拼写错误及内部未定义函数引用
• 修复：webpack.snack.config.js 中冗余且路径错误的 babel-loader 规则
• 移除：vue-loader / VueLoaderPlugin 残留依赖
• 补充：minimist 加入 dependencies（原先漏声明）
• 规范：统一使用 const/箭头函数/可选链，for 循环改为 reduce/forEach

3.0.0-beta.1

• 支持 React 19

2.3.6

• exclude 增加 cjs，解决 axios 升级编译报错问题