# @alilc/lowcode-code-generator

> 出码引擎 for LowCode Engine

Latest version **1.1.7** (published 2024-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alilc/lowcode-code-generator
pnpm add @alilc/lowcode-code-generator
yarn add @alilc/lowcode-code-generator
bun add @alilc/lowcode-code-generator
```

Provides the command `lowcode-code-generator`.

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2024-01-03 |
| First published | 2022-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 39 |
| Unpacked size | 45.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15882 |
| Maintainers | leoyuan, whatever_lll, yang1996, jun.li, qingniaotonghua, woshilaoge, jack.lianjie, otakuxv, zyy7259, sun2ama, hujiulong, liujuping123, akirakai, xingmolu, eternalsky, mark-ck, hzd822, clarencep, alvarto, leoyuan88 |

## Links

- npm: https://www.npmjs.com/package/@alilc/lowcode-code-generator
- Repository: https://github.com/alibaba/lowcode-engine.git#main
- Homepage: https://github.com/alibaba/lowcode-engine/#readme
- Issues: https://github.com/alibaba/lowcode-engine/issues
- npm.io page: https://npm.io/package/@alilc/lowcode-code-generator

## Dependencies (39)

- [qs](https://npm.io/package/qs.md) ^6.10.1
- [glob](https://npm.io/package/glob.md) ^7.2.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [debug](https://npm.io/package/debug.md) ^4.3.2
- [fp-ts](https://npm.io/package/fp-ts.md) ^2.11.9
- [json5](https://npm.io/package/json5.md) ^2.2.0
- [jsonc](https://npm.io/package/jsonc.md) ^2.0.0
- [jszip](https://npm.io/package/jszip.md) ^3.5.0
- [tslib](https://npm.io/package/tslib.md) ^2.3.1
- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [semver](https://npm.io/package/semver.md) ^7.3.4
- [mock-fs](https://npm.io/package/mock-fs.md) ^5.1.2
- [fs-extra](https://npm.io/package/fs-extra.md) 9.x
- [prettier](https://npm.io/package/prettier.md) ^2.5.1
- [@types/qs](https://npm.io/package/@types/qs.md) ^6.9.6
- [commander](https://npm.io/package/commander.md) ^6.1.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [nanomatch](https://npm.io/package/nanomatch.md) ^1.2.13
- [babel-jest](https://npm.io/package/babel-jest.md) ^26.5.2
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [node-fetch](https://npm.io/package/node-fetch.md) 2.x
- [short-uuid](https://npm.io/package/short-uuid.md) ^3.1.1
- [@types/glob](https://npm.io/package/@types/glob.md) ^7.2.0
- [change-case](https://npm.io/package/change-case.md) ^3.1.0
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.12.12
- [@types/debug](https://npm.io/package/@types/debug.md) ^4.1.7
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.12.11
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.162
- [@types/semver](https://npm.io/package/@types/semver.md) ^7.3.4
- [html-entities](https://npm.io/package/html-entities.md) ^2.3.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.5
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.12.12
- [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^9.0.12
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.12.11
- [@types/node-fetch](https://npm.io/package/@types/node-fetch.md) 2.x
- [@alilc/lowcode-types](https://npm.io/package/@alilc/lowcode-types.md) ^1.0.0

## Recent versions

- 1.1.7 (latest) — 2024-01-03
- 1.1.3-beta.3 (beta) — 2023-06-05
- 1.1.6 — 2023-07-25
- 1.1.5 — 2023-07-13
- 1.1.4 — 2023-06-09
- 1.1.3 — 2023-06-05
- 1.1.3-beta.1 — 2023-05-19
- 1.1.2 — 2023-05-06
- 1.1.1-beta.1 — 2023-03-31
- 1.1.0 — 2023-03-30
- 1.0.8 — 2023-03-10
- 1.0.7 — 2023-01-09
- 1.0.7-beta.5 — 2022-12-21
- 1.0.7-beta.4 — 2022-12-16
- 1.0.7-beta.3 — 2022-11-28
- … 21 more at https://npm.io/package/@alilc/lowcode-code-generator/versions

## README

# 出码

所谓出码，即将低代码编排出的 schema 进行解析并转换成最终可执行的代码的过程。本模块提供有 Icejs 和 Rax 两套框架的出码方案，并提供了强大而灵活的扩展机制。

## 使用方法

### 1) 通过命令行快速体验

欢迎使用命令行工具快速体验：`npx @alilc/lowcode-code-generator -i example-schema.json -o generated -s icejs`

--其中 example-schema.json 可以从[这里下载](https://unpkg.com/@alilc/lowcode-code-generator@beta/example-schema.json)

### 2) 通过设计器插件快速体验

1. 安装依赖: `npm install --save @alilc/lowcode-plugin-code-generator`
2. 注册插件:

```ts
import { plugins } from '@alilc/lowcode-engine';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';

// 在你的初始化函数中：
await plugins.register(CodeGenPlugin);

// 如果您不希望自动加上出码按钮，则可以这样注册
await plugins.register(CodeGenPlugin, { disableCodeGenActionBtn: true });
```

然后运行你的低代码编辑器项目即可 -- 在设计器的右上角会出现一个“出码”按钮，点击即可在浏览器中出码并预览。

### 3）服务端出码接入

此代码生成器一开始就是为服务端出码设计的，你可以直接这样来在 node.js 环境中使用：

1. 安装依赖: `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器:

```js
import CodeGenerator from '@alilc/lowcode-code-generator';
```

3. 创建项目构建器:

```js
const projectBuilder = CodeGenerator.solutions.icejs();
```

4. 生成代码

```js
const project = await projectBuilder.generateProject(
  schema, // 编排搭建出来的 schema
);
```

5. 将生成的代码写入到磁盘中(也可以生成一个 zip 包)

```js
// 写入磁盘
await CodeGenerator.publishers.disk().publish({
  project, // 上一步生成的 project
  outputPath: '/path/to/your/output/dir', // 输出目录
  projectSlug: 'your-project-slug', // 项目标识
});

// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
  project, // 上一步生成的 project
  outputPath: '/path/to/your/output/dir', // 输出目录
  projectSlug: 'your-project-slug', // 项目标识 -- 对应生成 your-project-slug.zip 文件
});
```

注：一般来说在服务端出码可以跟 github/gitlab, CI 和 CD 流程等一起串起来使用，通常用于优化性能。

### 4）浏览器中出码接入

随着现在电脑性能和浏览器技术的发展，出码其实已经不必非得在服务端做了，借助于 Web Worker 特性，可以在浏览器中进行出码：

1. 安装依赖: `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器:

```js
import * as CodeGenerator from '@alilc/lowcode-code-generator/standalone-loader';
```

3. 【可选】提前初始化代码生成器:

```js
// 提前初始化下，这样后面用的时候更快(这个 init 内部会提前准备好创建 worker 的一些资源)
await CodeGenerator.init();
```

4. 出码

```js
const project = await CodeGenerator.generateCode({
  solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax )
  schema, // 编排搭建出来的 schema
});

console.log(project); // 出码结果(默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果)
```

注：一般来说在浏览器中出码适合做即时预览功能。

5. 下载 zip 包

```js
// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
  project, // 上一步生成的 project
  projectSlug: 'your-project-slug', // 项目标识 -- 对应下载 your-project-slug.zip 文件
});
```

### 5）自定义出码

前端框架灵活多变，默认内置的出码方案很难满足所有人的需求，好在此代码生成器支持非常灵活的插件机制 -- 欢迎参考 ./src/plugins/xxx 来编写您自己的出码插件，然后参考 ./src/solutions/xxx 将各种插件组合成一套适合您的业务场景的出码方案。

## 参与共建

欢迎参与共建，如何共建请参阅：[./CONTRIBUTING.md](https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/CONTRIBUTING.md)

---
_Source: https://npm.io/package/@alilc/lowcode-code-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._