lingfeng v3.3.6-canary.14

lingfeng

安装使用

npm i lingfeng -g

组件资产开发

初始化资产项目

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

新增组件

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

lingfeng g coms text

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

- 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

import { defineConfig } from 'lingfeng';

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

lingfeng dev

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

内置包

框架内置包如下：

 "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

import { defineConfig } from 'lingfeng';

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

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

lingfeng dev

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

发布构建

npm 包

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

lingfeng build

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

灵犀平台 zip 包

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

lingfeng zip

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

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

远程组件

lingfeng remote

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

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 指定当前项目的构建产物目录。

lingfeng publish

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

init assets

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

install

lingfeng install

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

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

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

lfpreview

lingfeng lfpreview

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