前端编译指南

InnoShop 的前端资源使用 Vite 构建，通过 build.js 脚本统一调度，支持核心模块和主题的独立编译。

技术栈

• 构建工具: Vite 6+
• CSS 预处理: Sass (modern-compiler API)
• JS 打包: Vite lib 模式，输出 IIFE 格式
• 依赖管理: npm

编译入口

所有编译由 build.js（项目根目录）驱动，不使用 Vite 的 dev server 或多入口模式。每次编译通过环境变量传入单个入口，逐个串行构建。

核心模块

名称	源文件	输出目录	说明
front/css	innopacks/front/resources/assets/scss/app.scss	public/build/front/css/	前台样式
front/js	innopacks/front/resources/assets/js/app.js	public/build/front/js/	前台脚本
panel/css	innopacks/panel/resources/assets/scss/app.scss	public/build/panel/css/	后台样式
panel/js	innopacks/panel/resources/assets/js/app.js	public/build/panel/js/	后台脚本
install/css	innopacks/install/resources/assets/scss/app.scss	public/build/install/css/	安装向导样式

主题

源文件	输出目录	分发目录
themes/{name}/assets/scss/app.scss	public/static/themes/{name}/css/	themes/{name}/public/css/
themes/{name}/assets/js/app.js	public/static/themes/{name}/js/	themes/{name}/public/js/

主题编译完成后，产物会自动复制到 themes/{name}/public/ 作为分发备份。

命令用法

# 安装依赖
npm install

# 编译所有核心模块（front + panel + install）
npm run build

# 编译单个核心模块
TARGET=front npm run build      # 仅前台
TARGET=panel npm run build      # 仅后台
TARGET=install npm run build    # 仅安装向导

# 编译主题（跳过核心模块）
THEME=petnow npm run build

# 同时编译核心模块 + 主题
TARGET=panel THEME=petnow npm run build

npm run dev、npm run prod、npm run production 均为 npm run build 的别名，行为相同。

构建流程详解

1. 环境变量

build.js 读取以下环境变量控制编译行为：

变量	说明	示例
TARGET	指定编译的核心模块 (front/panel/install)	TARGET=panel
THEME	指定编译的主题名称	THEME=petnow

vite.config.js 内部使用的变量（由 build.js 自动设置，无需手动传）：

变量	说明
BUILD_INPUT	源文件路径
BUILD_OUTDIR	输出目录
BUILD_OUTPUT_NAME	JS 输出文件名（默认 app）

2. 编译流程

build.js
  ├── 解析 TARGET / THEME 环境变量
  ├── 构建入口列表（核心模块 或 主题）
  ├── 逐个调用 npx vite build（传入 BUILD_INPUT / BUILD_OUTDIR）
  ├── JS 入口：Vite 输出 index.js → 重命名为 {outputName}.js
  └── 主题编译：复制产物到 themes/{name}/public/

3. CSS 编译

CSS 使用 Vite 的 rollupOptions.input 模式：

• 输入 SCSS 文件，输出无 hash 的 CSS 文件
• 通过 assetFileNames 去掉文件名 hash

4. JS 编译

JS 使用 Vite 的 lib 模式（IIFE 格式）：

• 输入 JS 文件，输出自执行函数
• Vite lib 模式默认输出 index.js，build.js 会自动重命名为 app.js

路径别名

vite.config.js 注册了以下别名，可在 SCSS/JS 中直接使用：

别名	指向	用途
@front	innopacks/front/resources/	前台资源引用
@theme	themes/{THEME}/	主题资源引用
~	node_modules/	兼容旧版 SCSS 导入（如 ~bootstrap）

输出目录结构

public/
├── build/
│   ├── front/
│   │   ├── css/app.css
│   │   └── js/app.js
│   ├── panel/
│   │   ├── css/app.css
│   │   └── js/app.js
│   └── install/
│       └── css/app.css
└── static/
    └── themes/
        └── {theme}/
            ├── css/app.css
            ├── js/app.js
            └── images/...

主要依赖

依赖	用途
bootstrap 5.3	UI 框架（CSS + JS）
bootstrap-icons	图标库
jquery 3.7	DOM 操作
axios	HTTP 请求
codemirror 6	代码编辑器
sass / sass-embedded	SCSS 编译

注意事项

• 编译后无需手动处理 hash 或 manifest，Vite 配置已确保输出固定文件名
• Linux 环境编译完成后会自动设置 public/ 目录权限为 755，属主为 www:www
• 主题必须包含 assets/scss/app.scss 或 assets/js/app.js 才会被编译，不存在则自动跳过
• 修改核心模块或主题资源后，需重新运行 npm run build 才能生效