马克社区,马克吐温社区,马克java社区探索组件在线预览和调试前端

探索组件在线预览和调试

背景
前端人员在开发过程中，如何快速感知到组件的功能和属性？现状是通过阅读组件相关文档，好在基础组件库的文档相对完整和清晰，手动补全示例。业务组件相关文档目前只能在内部 NPM 私库上查看，静态的 API 文档，没有组件的 Demo。对于非前端人员，如何预览和调试组件呢？比如：某一天，产品想提前调研其它业务线的业务组件功能能否满足业务诉求；业务组件开发完成，测试和设计可以介入组件相关功能的验证；运营人员可以在低代码搭建平台，预览和调试相关组件等。

基于以上痛点问题，我们从需求点出发，逐步探索实现方案。

需求
场景分析
功能
组件预览
组件调试面向不同的用户群体，组件功能调试的交互分为两种，一种是代码调试，即通过代码编辑器修改示例代码，另一种是组件 schema 调试，通过 schema JSON 数据来描述组件的属性，然后通过 schema 渲染器渲染成组件属性面板，这样非研发人员也可以方便的调试组件功能。
分类
基础组件
业务组件
低代码组件大致整理了下：

这里的低代码组件是指提供给低代码搭建平台使用的自定义组件，目前公司的低代码搭建平台主要有“鲁班”，对此感兴趣的小伙伴可以翻一下往期关于“鲁班”的文章。

针对组件 schema 调试，低代码组件本身自带 schema 文件，如：“鲁班”自定义组件会有一份 schema.json 文件，需要开发者去编写和维护这份文件。

如：

{
"props": {
    "linkList": {
      "group": "链接配置",
      "title": "链接列表",
      "type": "array",
      "fields": [
        {
          "name": "imageAddress",
          "title": "图链接图片地址",
          "type": "string"
        },
        {
          "name": "imageLink",
          "title": "链接跳转地址",
          "type": "string"
        }
      ]
    }
},
"models": {
    "linkList": [
      {
        "imageAddress": "",
        "imageLink": ""
      },
      {
        "imageAddress": "",
        "imageLink": ""
       }
    ]
}
}

同样，业务组件也需要同一份 schema 协议的 JSON 文件，这样就可以动态调试组件的属性。但是，不会让开发组件的同学去手动编写。

自动生成 schema 文件大致思路：

应用
基础组件的示例在线预览和调试
业务组件的 Demo 在线预览和调试
面向人群
研发
非研发：产品、测试、运营研发主要用到组件的调试功能，而像运营和产品这样非研发人员，他们的诉求简单快捷，就是直接预览该组件，并且可以通过修改组件的 props 看到实时效果，那么问题来了，如何修改组件当前的 props 属性？玩过低代码的同学应该很清楚，有个组件属性面板。基于以上，我们可能需要代码编辑面板、组件属性面板以及组件功能模块。
大致画了下页面的结构图：

调研
市面上成熟的产品
Stackblitz 一款非常优秀的在线 IDE，移植了很多 VS Code 的功能和特性。目前支持了很多框架模版，如：React、Angular、Vue3、Next.js、Nuxt3 及自定义模版等，其中， StackBlitz 提供的 WebContainers 可以在浏览器端运行 Node.js 环境。

CodeSandbox 为 Web 应用程序而开发而构建的在线编辑器，同样也提供了多种模版方便开发者使用。大部分核心代码也开源了，网上也有相关的原理解析和搭建在线 IDE 方案的资料，有兴趣的同学可以去看看。

小结
需求和应用场景已经很明确了，考虑到不同的用户群体，交互方式也有差别，重点是组件调试功能的差异性，对于研发人员可通过代码编辑器去修改代码达到调试效果，非研发人员则通过修改属性面板的组件属性值。而市面上的成熟产品会提供一些设计思路，具体实现方案下面会细讲。

方案
从页面结构图，我们先聊下代码编辑器、组件属性面板、工具栏、预览区的设计方案。

代码编辑器
目前主流的有两种：

MonacoEditor
Codemirror MonacoEditor 相对来说功能强大，集成度高，但随之带来的是比较重，而 Codemirror 轻量小巧，核心文件压缩后仅 70+ KB 左右，根据所需要支持的语言按需打包。
两种代码编辑器都能满足我们的需求，在线修改一些组件 Demo 的部分代码，其实 Codemirror 够用了。

组件属性面板
了解低代码搭建平台的朋友应该很熟悉了，其实就是通过表单去动态修改组件的属性参数，因此，需要一份通用的 schema 协议，来描述组件的自定义属性。可以由鲁班和大数据搭建平台那边提供 schema 数据，我们负责渲染即可。

大致列了下组件属性的类型和操作表单类型的对应关系：

工具栏
工具栏包含的主要功能有：

账号登陆
接口代理业务组件和低代码组件需要被调试时，比如测试人员需要介入测试组件功能，需要用到账号登陆和接口代理功能。组件内涉及到业务接口的请求头需要携带当前登陆用户的 token 信息，先通过请求 oauth 接口拿到对应的 token，然后塞到请求头的 Authorization 字段上。
上面实现的前提是需要一个代理服务，在本地开发环境我们可以用 http-proxy 插件创建本地代理服务，那么问题来了，在浏览器端如何做代理服务？

目前主流的方案都是通过 Chrome 插件形式，需要用户手动填写代理接口等信息。在我们的场景下，这个方案对用户体验显然不够友好。还有个方案可以利用浏览器的黑科技 —— Service Worker，它可以拦截网页发出的请求，并能自定义返回内容，相当于在浏览器内部实现了一个反向代理。

预览区
核心会涉及到两点：

容器
通信容器是指页面容器，业界通用做法都是通过 iframe，将编译好的组件代码挂载到 iframe 里一个 root 节点上，主要有环境隔离和动态生成预览页面的访问链接作用。编辑器、核心包、预览区之间的通信可以用 postMessage。
通信时序图：

核心包
设计思路，主要参考了 CodeSandbox 的核心源码，主要涉及到代码转译和代码执行。核心模块有 Manger、Transpiler、Preset、Transpiled-module、Runtime。

架构图：

大致流程：

Manger 模块
顾名思义“管理者“，即管理其它核心模块，主要负责代码转译和执行的一系列过程。

核心方法有：

addTranspiledModule
resolveTranspiledModuleSync
resolveTranspiledModuleAsync
evaluateTranspiledModule首先将转译后的模块缓存起来放到 transpiledModules 对象，需要的话可以从缓存里同步或异步加载转译后的模块，如果需要执行转译的模块，可以调用 evaluateTranspiledModule 方法。
transpiledModules 的类型定义：

type IModule = {
path: string;
url?: any;
code: string;
requires?: Array<string>;
parent?: Module;
};

interface ITranspiledModules {
    [path: string]: {
      module: IModule;
      tModules: {
        [query: string]: ITranspiledModule; // ITranspiledModule 类型定义放在 Transpiled-module 模块
      };
    };
}
Transpiler 模块
类比 Webpack 的 loader，对指定类型的文件进行编译，如：Babel、Typescript、vue、tsx、jsx 等。

介绍下部分内置的 Transpiler 模块：

babelTranspiler
stylesTranspiler
rawTranspiler
noopTranspiler
vueTranspilerrawTranspiler 跟 Webpack 的 raw-loader 作用一样，将模块的内容作为字符串导入，从而实现静态资源内联。
实现原理也很简单：

module.exports = JSON.stringify(sourceCode)
babelTranspiler 这里实现了简化版，script 标签引入 bable-standalone.js，拿到全局对象 Babel。

部分核心代码：

import babelPluginRenameImports from './plugins/babel-plugin-rename-imports';

const transpiledCode = window.Babel.transform(code, {
plugins: [babelPluginRenameImports],
presets: ['es2015', 'es2016', 'es2017'],
}).code;
vueTranspiler ，这里默认是 vue2.0 版本，核心依赖了 vue-template-compiler、vue-template-es2015-compiler。

将 vue 单文件组件转换为 SFC 对象：

import * as compiler from 'vue-template-compiler';
import type {SFCDescriptor} from 'vue-template-compiler';

const sfc:SFCDescriptor = compiler.parseComponent(content, { pad: 'line' });

解析 Vue template 部分核心代码：

import * as compiler from 'vue-template-compiler';
import transpile from 'vue-template-es2015-compiler';

function vueTemplateCompiler(html, options) {
const bubleOptions = options.buble;
const vueOptions = options.vueOptions || {};
const userModules = vueOptions.compilerModules || options.compilerModules;
const stripWith = bubleOptions.transforms.stripWith !== false;
const { stripWithFunctional } = bubleOptions.transforms;
const staticRenderFns = compiled.staticRenderFns.map((fn) =>
     toFunction(fn, stripWithFunctional)
); // 静态渲染函数放到数组中
const compilerOptions: compiler.CompilerOptionsWithSourceRange = {
    preserveWhitespace: options.preserveWhitespace, // 是否保留 HTML 标记之间的所有空白字符
    modules: defaultModules.concat(userModules || []), // 自定义编译模版
    directives: vueOptions.compilerDirectives || options.compilerDirectives || {}, // 自定义指令
    comments: options.hasComment, // 是否保留注释
    scopeId: options.hasScoped ? options.id : null, /
};
const compiled = compiler.compile(html, compilerOptions);

// 生成渲染函数和静态子树
let code = transpile(
    'var render = ' +
     toFunction(compiled.render, stripWithFunctional) +
    '\n' +
    'var staticRenderFns = [' +
    staticRenderFns.join(',') +
     ']') + '\n';
    // mark with stripped (this enables Vue to use correct runtime proxy detection)
    if (stripWith) {
      code += `render._withStripped = true\n`;
    }

    const exports = `{ render: render, staticRenderFns: staticRenderFns }`;
    code += `module.exports = ${exports}`;

   return code;
}

function toFunction(code, stripWithFunctional) {
return 'function (' + (stripWithFunctional ? '_h,_vm' : '') + ') {' + code + '}';
}

Vue 在渲染阶段将模板编译为 AST，然后根据 AST 生成 render 函数，底层通过调用 render 函数会生成 VNode 创建虚拟 DOM。

Preset 模块
组件预设构建模版，针对不同组件的框架类型，如：Vue2、React 等，预设默认该类型组件所需的 Transpiler 模块。类似于 vue-cli、create-react-app。

核心方法：

registerTranspiler
getTranspilersregisterTranspiler 作用是注册 Transpiler 模块。
部分伪代码：

vuePreset.registerTranspiler(
(module) => /\.(m|c)?jsx?$/.test(module.path),
[{ transpiler: babelTranspiler }]
);
vuePreset.registerTranspiler(
(module) => /\.vue$/.test(module.path),
[{ transpiler: vueTranspiler }]
);
Transpiled-module 模块
即转译后的模块，维护转译的结果、代码执行的结果、依赖的模块信息，负责驱动具体模块的转译(调用 Transpiler)和执行。

Runtime 模块
执行转译后的模块入口，使用 eval 执行入口文件，若遇到 require 函数，加载转译后的依赖模块然后使用 eval 执行执行。

核心代码：

export default function (
code: string,
require: Function,
module: { exports: any },
env: Object = {},
globals: Object = {},
{ asUMD = false }: { asUMD?: boolean } = {}
) {
const { exports } = module;

const g = typeof window === 'undefined' ? self : window;
const global = g;
g.global = global;

// 兼容 Node.js 环境，列举了一部分
const process = {
    env: { NODE_ENV: 'development', ...env },
    cwd: () => { return '/' },
    umask: () => { return 0 }
};

// 全局变量
const allGlobals: { [key: string]: any } = {
    require, // require 函数
    module,
    exports,
    process,
    global,
    ...globals,
};

// 是否 UMD 模块
if (asUMD) {
    delete allGlobals.module;
    delete allGlobals.exports;
    delete allGlobals.global;
}

const allGlobalKeys = Object.keys(allGlobals);
const globalsCode = allGlobalKeys.length ? allGlobalKeys.join(', ') : '';
const globalsValues = allGlobalKeys.map((k) => allGlobals[k]);

const newCode = `(function $csb$eval(` + globalsCode + `) {` + code + `\\n})`;
(0, eval)(newCode).apply(allGlobals.global, globalsValues);

}

小结
从页面功能模块到组件的构建核心包设计，相信各位看官已经有了初步的了解。有两点没有提到，在这里简单补充下。

第一点是依赖包的数据源问题，简单粗暴点就是创建 manifest 文件，事先预存一份底层通用的依赖包数据，如：Babel 插件相关等，如果需要动态添加依赖包，可以使用 import-maps 特性。

第二点在 Transpiler 模块没有提到针对 react 组件的构建方案，添加相关 Babel 插件就好了，如：transform-runtime 、@babel/plugin-transform-react-jsx-source 等。

最后
背景、需求、调研、方案这四个层面，其中背景和需求更多是从产品的角度去思考和设计，这样做出来的东西才更符合用户需求和提升用户体验。我们技术人员不仅仅只关心技术层面的设计，更多时候还要从产品的角度去思考。

组件作为项目开发不可分割的一部分，从基础组件到业务组件，我们前端开发人员每天都在跟组件打交道。围绕着组件我们可以有很多专题，如何打造高质量组件？如何提升组件的复用率？如何提升组件的感知度？等等，贯穿组件的整个生命周期，那么如何治理好组件，需要我们共同努力和思考。

参考资料
CodeSandbox 核心源码：https://github.com/codesandbox/codesandbox-client/tree/master/packages/sandpack-core

CodeSandbox 浏览器端的 webpack 是如何工作的？：https://www.yuque.com/wangxiangzhong/aob8up/nb1gp2

作者：梓安

欢迎关注微信公众号：政采云前端团队