# fas-dev

**Repository Path**: coder-monkey/fas-dev

## Basic Information

- **Project Name**: fas-dev
- **Description**: 开发时框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-27
- **Last Updated**: 2023-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fas-dev

FAS 开发时框架技术验证原型项目

## 低代码开发时

用于出码环境的开发时框架，低代码页面开发，出码引擎出码到开发时框架；

开发框架启动用于开发调试，及编译打包；

编译打包时，根据低代码开发需要，可以打包发布单个页面，也可以编译打包全部页面。

单个页面时，打包命令需要透传入要打包的页面名，格式为 `target-page=<page-name>`，即：

```sh
pnpm build:page -- target-page=page-foo
```

打包后文件按照页面名放入 `dist`文件夹下，即 `dist/page-foo`。

打包全部页面时，使用命令 `pnpm build`或 `pnpm build:all`；
打包后文件同单个打包时，按照页面名放入 `dist`文件夹下。

每一个应用对应一个应用编号，写在环境变量 `.env`文件中，`VITE_APP_CODE`：

```
VITE_APP_CODE=DemoProjectCode
```

### 安装依赖

```sh
pnpm install
```

### 启动开发

本地运行查看

```sh
pnpm dev
```

本地运行效果的打包查看预览
```sh
pnpm build:dev

pnpm preview
```

### 编译打包

```sh
# 单个页面文件
# 例: `pnpm build:page -- target-page=page-foo`
pnpm build:page -- target-page=<page-name>

# 全部页面
pnpm build:all
```

## 框架说明

### 浏览器兼容

Vite 打包默认目标为 ` 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器`，最低支持转义语法到 `es2015`。

因此项目需要兼容老版本浏览器的话，需要另外自行 `polyfill`。

```shell
# @vitejs/plugin-legacy 这种 polyfill 不支持库模式，库模式的话可以配置 rollupOptions 里的 babel 插件
pnpm add @vitejs/plugin-legacy
pnpm add -D terser # 使用 @vitejs/plugin-legacy 需要安装 terser 否则报错找不到 terser
```

Vite 配置文件（如 `vite.config.js`）

```js
defineConfig({
  plugins: [
    legacy({
      targets: [['defaults', 'chrome < 87', 'edge < 88', 'safari < 14']],
    }),
  ],
});
```

### 插件


| Vite 插件                | 说明          |  |
| ------------------------ | ------------- | - |
| vite-plugin-compression2 | gzip 压缩插件 |  |
| vite-plugin-html         | ejs 模板插件  |  |
|                          |               |  |