webIDE工具之Molecule使用指南工具简介 Molecule 是一款受 VSCode 启发，使用 React.j

工具简介

Molecule 是一款受 VSCode 启发，使用 React.js 构建的 Web IDE UI 框架。我们设计了类似 VSCode 的扩展（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。

功能表

webIDE自定义工作台
内置扩展
内置 Monaco Editor Command Palette、Keybinding等模块，并支持扩展
国际化

安装方法

npm install @dtinsight/molecule
# Or
yarn add @dtinsight/molecule

引入:其中extensions放置扩展内容

import React from 'react';
import ReactDOM from 'react-dom';
import { create, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

const moInstance = create({
    extensions: [],
});

const App = () => moInstance.render(<Workbench />);

ReactDOM.render(<App />, document.getElementById('root'));

基础方法

扩展服务

首先定义扩展，其次通过 ExtensionService 服务对象来管理扩展程序

声明工作台（包括内置工作台和自定义工作台）

内置工作台划分成了 MenuBar、ActivityBar、Sidebar,、Editor、Panel、StatusBar 以及 AuxiliaryBar(v1.3.0+ 支持) 主要7大模块

目前工作台只做简单UI渲染，想要完成具体的业务场景，需要我们联合其他模块来实现，例如 ActivityBar 与 Sidebar 联动，FolderTree 与 Editor 联动等等

高级方法

自定义工作台

Molecule 默认的 Workbench UI 是一个 VSCode 的克隆版本。但是我们在实际的开发场景中，往往不能满足我们的需求。

除了内置的一些原子 Components 以外，Molecule 同时提供了基本的 Workbench、SideBar、Editor、ActivityBar、MenuBar、Panel、StatusBar 等核心UI 部件，以便开发者根据自己的需求重新组装自己的 Workbench。 2. 重组工作台

<div id={ID_APP} className={appClassName} tabIndex={0}>
    <div className={workbenchFinalClassName}>
        <Display visible={isMenuBarHorizontal}>
            <MenuBarView mode={MenuBarMode.horizontal} />
        </Display>
        <div className={mainBenchClassName}>
            <div className={compositeBarClassName}>
                <Display visible={isMenuBarVertical}>
                    <MenuBarView mode={MenuBarMode.vertical} />
                </Display>
                <Display
                    visible={!activityBar.hidden}
                    className={displayActivityBarClassName}
                >
                    <ActivityBarView />
                </Display>
            </div>
            <SplitPane
                sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
                split="vertical"
                allowResize={[false]}
                onChange={handleSideBarChanged}
                onResizeStrategy={() => ['keep', 'pave']}
            >
                <Pane minSize={170} maxSize="80%">
                    <SidebarView />
                </Pane>
                <SplitPane
                    sizes={getSizes()}
                    allowResize={[false]}
                    split="horizontal"
                    onChange={handleEditorChanged}
                    onResizeStrategy={() => ['pave', 'keep']}
                >
                    <Pane minSize="10%" maxSize="80%">
                        <EditorView />
                    </Pane>
                    <PanelView />
                </SplitPane>
            </SplitPane>
        </div>
    </div>
    <Display visible={!statusBar.hidden}>
        <StatusBarView />
    </Display>
</div>

源码解读

基础组件——sidebar

使用React.createElement创建元素
React.createElement 是 React 中用于创建 React 元素（虚拟 DOM 节点）的核心方法。可用于JavaScript环境下，并在无 JSX 环境下灵活构建 React 应用。其语法规则如下：

webIDE工具之Molecule使用指南