Molecule：轻量级Web IDE UI框架

1. 项目介绍

Molecule 是一个基于 React.js 构建的轻量级 Web IDE UI 框架，受到 VSCode 的启发。我们设计了与 VSCode 类似的扩展 API，以帮助开发者以更简单的方式扩展工作台。它便于与 React.js 应用程序集成，并已被应用于 DTStack 的多个产品中。

Molecule 的特点包括：

• 内置 Visual Studio Code 工作台 UI
• 兼容 Visual Studio Code 颜色主题
• 通过 React 组件轻松自定义工作台
• 内置 Monaco 编辑器
• 支持 Command Palette、快捷键绑定等特性
• 支持 i18n，内置简体中文、韩语和英语
• 内置设置，支持通过扩展进行编辑和扩展
• 内置基本资源管理器、搜索组件，并通过扩展进行扩展
• 支持 TypeScript

2. 项目快速启动

安装

首先，你需要安装 Molecule：

npm install @dtinsight/molecule
# 或者
yarn add @dtinsight/molecule

基本使用

接下来，你可以按照以下代码示例来创建和使用 Molecule：

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 = () => {
  return moInstance.render(<Workbench />);
};

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

开发模式

克隆源代码到本地后，你可以启动开发模式：

git clone [e-mail]:DTStack/molecule.git
cd molecule
yarn
yarn dev

默认情况下，使用 Storybook 管理和开发 React 组件，访问地址为 http://localhost:6006/。

测试

进行测试：

yarn test -u

构建和预览

编译代码到 ES6 模块并输出到 esm 文件夹：

yarn build

启动 Web 预览模式：

yarn web

3. 应用案例和最佳实践

在这一部分，你可以展示如何将 Molecule 应用于实际项目中，包括但不限于：

• 如何集成到现有的 React 应用程序中
• 如何使用内置的资源和组件
• 如何自定义和扩展 Molecule 的工作台

4. 典型生态项目

介绍与 Molecule 相关的典型生态项目，包括但不限于：

• 与其他开源项目的集成案例
• Molecule 扩展开发指南
• 在不同领域（如教育、企业内部开发等）的应用案例

通过上述内容，开发者可以快速上手并有效利用 Molecule 来构建自己的 Web IDE。