# lingfeng

> lingxi's lingfeng

Latest version **3.3.9** (published 2025-08-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install lingfeng
pnpm add lingfeng
yarn add lingfeng
bun add lingfeng
```

Provides the commands `lf`, `lingfeng`.

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.9 |
| Published | 2025-08-15 |
| First published | 2022-12-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 33 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 (+12 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | xiaohuoni |

## Links

- npm: https://www.npmjs.com/package/lingfeng
- Repository: https://github.com/WhaleCloudCamp/lx-cli
- Homepage: https://github.com/WhaleCloudCamp/lx-cli#readme
- Issues: https://github.com/WhaleCloudCamp/lx-cli/issues
- npm.io page: https://npm.io/package/lingfeng

## Dependencies (33)

- [tar](https://npm.io/package/tar.md) ^6.1.12
- [vue](https://npm.io/package/vue.md) ^3.4.21
- [antd](https://npm.io/package/antd.md) 4.24.13
- [sirv](https://npm.io/package/sirv.md) ^2.0.2
- [alita](https://npm.io/package/alita.md) ^3.3.11
- [react](https://npm.io/package/react.md) 17.0.2
- [father](https://npm.io/package/father.md) 4.4.0
- [stylis](https://npm.io/package/stylis.md) ^4.3.1
- [archiver](https://npm.io/package/archiver.md) ^5.3.1
- [js-base64](https://npm.io/package/js-base64.md) ^3.7.5
- [react-dom](https://npm.io/package/react-dom.md) 17.0.2
- [uglify-js](https://npm.io/package/uglify-js.md) ^3.19.3
- [codemirror](https://npm.io/package/codemirror.md) 5.65.2
- [editorview](https://npm.io/package/editorview.md) ^0.1.8
- [vue-loader](https://npm.io/package/vue-loader.md) ^17.4.2
- [compression](https://npm.io/package/compression.md) ^1.7.4
- [@umijs/utils](https://npm.io/package/@umijs/utils.md) ^4.0.64
- [antd-mobile-5](https://npm.io/package/antd-mobile-5.md) ^5.26.0
- [@types/archiver](https://npm.io/package/@types/archiver.md) ^5.3.2
- [@wufengteam/core](https://npm.io/package/@wufengteam/core.md) 3.6.1-alpha.1
- [@lingxiteam/dform](https://npm.io/package/@lingxiteam/dform.md) 3.6.1-alpha.3
- [@lingxiteam/icons](https://npm.io/package/@lingxiteam/icons.md) 3.6.1-alpha.3
- [@lingxiteam/types](https://npm.io/package/@lingxiteam/types.md) 3.6.1-alpha.3
- [handlebars-loader](https://npm.io/package/handlebars-loader.md) ^1.7.3
- [@lingxiteam/assets](https://npm.io/package/@lingxiteam/assets.md) 3.4.1-alpha.3
- [@lingxiteam/editor](https://npm.io/package/@lingxiteam/editor.md) 3.6.1-alpha.4
- [@lingxiteam/factory](https://npm.io/package/@lingxiteam/factory.md) 3.6.1-alpha.8
- [@umijs/bundler-utils](https://npm.io/package/@umijs/bundler-utils.md) ^4.1.1
- [@lingxiteam/engine-pc](https://npm.io/package/@lingxiteam/engine-pc.md) 3.6.1-alpha.3
- [@lingxiteam/pcfactory](https://npm.io/package/@lingxiteam/pcfactory.md) 3.6.1-alpha.8
- [@lingxiteam/engine-app](https://npm.io/package/@lingxiteam/engine-app.md) 3.6.1-alpha.3
- [@umijs/bundler-webpack](https://npm.io/package/@umijs/bundler-webpack.md) ^4.1.1
- [@lingxiteam/load-framework](https://npm.io/package/@lingxiteam/load-framework.md) ^0.2.1

## Recent versions

- 3.3.9 (latest) — 2025-08-15
- 3.3.8 — 2025-08-15
- 3.3.7 — 2024-12-25
- 3.3.6-canary.15 — 2024-06-18
- 3.3.6-canary.14 — 2024-04-17
- 3.3.6-canary.13 — 2024-04-15
- 3.3.6-canary.12 — 2024-04-09
- 3.3.6-canary.11 — 2024-04-07
- 3.3.6-canary.10 — 2024-04-07
- 3.3.6-canary.8 — 2024-04-07
- 3.3.6-canary.7 — 2024-03-29
- 3.3.6-canary.5 — 2024-03-28
- 3.3.6-canary.4 — 2024-03-26
- 3.3.6-canary.3 — 2024-03-26
- 3.3.6-canary.2 — 2024-03-26
- … 60 more at https://npm.io/package/lingfeng/versions

## README

# lingfeng

## 安装使用

```bash
npm i lingfeng -g
```

## 组件资产开发

### 初始化资产项目

1、新建一个空白文件夹，如 mkdir demos
2、进入 demos 目录，如 cd demos
3、使用 lingfeng init com 初始化项目
4、请输入仓库名称，作为发布包名

### 新增组件

使用 `lingfeng g coms [name]` 命令新增页，如新增 text 组件

```bash
lingfeng g coms text
```

组件根据约定，`src/lfcomponents` 下的文件目录为一个组件，并且必须包含 `config.ts`、`index.tsx`，可选包含 `icon.png`、`index.less`、`indexED.tsx`,如 `text`:

```bash
- text
    - config.ts 为平台需要的注册文件
    - icon.png 为配置态组件清单上对应的组件图标
    - index.less
    - index.tsx
    - indexED.tsx
```

其中 config.ts 为平台需要的注册文件，会在 zip 时被自动注册

icon.png 为配置态组件清单上对应的组件图标，会根据 config.ts 中配置的 `icon: 'CCButton',` 自动注册同名的图标组件，支持 png 和 svg。`icon.*` 文件不存在的话，config.ts 中 icon 也可以写平台已注册的图标

index.less 为可选文件，需要手动引入，且不支持 css module

indexED.tsx 为配置态组件，如果不存在这个文件，则配置态和运行态都使用 index.tsx 作为注册组件

### 启动开发服务器

注意配置文件 `.lingfengrc.ts` 中的 platform 配置，会启用对应平台的编辑器，支持 pc 和 h5

```bash
import { defineConfig } from 'lingfeng';

export default defineConfig({
  platform: 'pc',
});
```

```bash
lingfeng dev
```

启动开发服务器时，当前项目的所有组件的配置态和运行态都会被注册，所以要保证所有的组件的配置文件都正确。

### 内置包

框架内置包如下：

```json
 "dependencies": {
    "antd": "4.18.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "antd-mobile-5": "^5.26.0",
    "@wufengteam/core": "^3.1.1",
     "@lingxiteam/dform": "3.5.1-alpha.7",
  },
```

无需安装可直接使用，并且在打包时会被自动 externals

### 启用远程调试模式

为了方便定位和连调线上问题，我们还提供了运行态的远程连调模式，该模式需要在组件上传到平台后，在平台上配置生成线上的页面 dsl 之后，才可用。

修改配置文件，`.lingfengrc.ts`，开启 debugOnLine 提供远程的 appId 和 pageId

```bash
import { defineConfig } from 'lingfeng';

export default defineConfig({
  platform: 'pc',
  debugOnLine: true,
  appId: '772790966277644288',
  pageId: '918079837660270592',
});
```

> 注意调试的时候需要选择当前提供的 appId 和 pageId 对应的页面是 pc 端还是 h5 端，并且与配置文件中配置的 `platform` 无关。

```bash
lingfeng dev
```

启动开发服务器时，当前项目的所有组件的运行态会被自动注册，所以你可以使用远程的运行态 dsl 调试本地的组件

## 发布构建

### npm 包

按常规 npm 组件库打包，执行 `lingfeng build`。

```bash
lingfeng build
```

会生成 `dist/cjs` 和 `dist/esm` 用于常规的 npm 发布资源。

### 灵犀平台 zip 包

按照灵犀平台约定的 zip 包，执行 `lingfeng zip`。

```bash
lingfeng zip
```

会按照 src/components 下的每一个目录生成独立的组件入口，生成单文件相关的 zip 包。less 会被编译成 css 内置在 js 中，icon 会被编译成 base64 数据（或者 svg）保存在 js 中，如果 icon 文件太大，请提供更小的 icon。

zip 中包含 `config.json`，`index.min.js`，`indexED.min.js`。

### 远程组件

```bash
lingfeng remote
```

运行远程组件，由于会自动 externals 内置包，所以需要在 useRemoteComponent 中传入被 externals 的内置包。

```tsx
import React from 'react';
import RemoteComponent, { getUseRemoteComponent } from '@lingxiteam/pcfactory/lib/RemoteComponent';
import React from 'react';
import lodash from 'lodash';
import * as antdMobile5 from "antd-mobile-5";

const useRemoteComponent = getUseRemoteComponent({
  // 根据实际用到的传入被 externals 的包
  resolve: {
    antdMobile: antdMobile5,
    react: 'react',
    classnames: classnames,
    lodash: 'lodash',
  },
});

export default () => {
  return <RemoteComponent url="http://localhost:8000/button/button.min.js" useRemoteComponent={useRemoteComponent} />
};
```

#### 远程组件开发

1.  在 `src/remoteComps` 目录下增加远程组件
2.  重启开发服务，使用“远程组件开发辅助”组件，配置要开发调试的本地组件。  
3. 可以通过自定义参数传入属性，方便定位问题。

## 与现有项目集成

项目中安装 lingfeng

```
pnpm i lingfeng
或者 yarn add lingfeng
```

增加一个命令 package.json 的 scripts 

```
"dev:coms":"lingfeng dev",
// 构建远程组件
"remote":"lingfeng remote",
```

## flow

用户管理灵峰脚手架

### publish

将当前项目的构建产物，当作 lingfeng 脚手架的资产发布，可以根据 `.lingfengrc.ts` 的 `outputPath` 指定当前项目的构建产物目录。

```bash
lingfeng publish
```

会自动发布一个 `@lingxi-assets/*` 的包，因此执行人需要拥有 npm `@lingxi-assets` 组织的管理权限，请联系管理员添加。

### init assets

可以使用 `lingfeng init assets` 将任意的前端项目指定为 lingfeng 资产项目。会在当前项目的根目录生成 `.lingfengrc.ts` 配置

### install

```bash
lingfeng install
```

根据配置文件中 `.lingfengrc.ts` 的 `dependencies` 配置，将指定的资产，安装到当前项目中。

可以通过 `paths` 配置指明将 demo 同步到 hello 目录下。不写的话，'@lingxi-assets/*' 默认是 *


```ts
paths: {
    // 指明将 demo 同步到 hello 目录下。不写的话，'@lingxi-assets/*' 默认是 *
    '@lingxi-assets/demo': '/hello',
  },
```

### lfpreview

```bash
lingfeng lfpreview
```

根据配置文件中 `.lingfengrc.ts` 的 `nginx` 和 `proxy` 配置，对本地产物进行本地的预览验证

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