Skip to content

Latest commit

 

History

History
107 lines (76 loc) · 3.65 KB

README-zhCN.md

File metadata and controls

107 lines (76 loc) · 3.65 KB
Raw
watchman-logo

Molecule

一个轻量的 Web IDE UI 框架

CI Codecov NPM downloads NPM version

中文 | English

Molecule 是一款受 VSCode 启发，使用 React.js 构建的 Web IDE UI 框架。我们设计了类似 VSCode 的扩展（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。Molecule 与 React 项目集成非常方便，我们已经在 DTStack 多个产品、项目中使用。

在线预览

核心功能

  • 内置 React 版本的 Visual Studio Code Workbench UI
  • 基本兼容 Visual Studio Code 的 ColorTheme
  • 支持使用 React 组件自定义 Workbench UI 样式
  • 内置 Monaco Editor Command Palette、Keybinding等模块，并支持扩展
  • 支持 i18n，内置简体中文、English 2 种语言
  • 内置一个简单的 Settings 模块，支持在线编辑修改以及扩展
  • 内置默认的 Explorer, Search 等组件，并支持扩展
  • Typescript 支持

安装

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

基本使用

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

const App = () => (
    <MoleculeProvider extension={[]}>
        <Workbench />
    </MoleculeProvider>
);

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

extension 为 Workbench 应用的扩展入口，如何编写扩展，请参考快速开始。

文档

开发

git clone [email protected]:DTStack/molecule.git
``
`
首先 Clone 源码到本地
**开发模式**

```bash
yarn # install dependencies

yarn dev # 启动开发模式

Molecule 中的组件是基于 Storybook 开发并管理的，预览地址：http://localhost:6006/默认地址浏览。

构建 & 预览

yarn build
yarn web # 预览打包后的 Web

当前我们默认将 Molecule 以 ES6 模块的方式构建到 esm 目录。另外， 这里除了 Storybook 提供的组件预览模式以外，我们同时内置了一个使用 ESM 模块的 Web 预览模式。

贡献

更多请参考 CONTRIBUTING.

License

Copyright © DTStack. All rights reserved.

Licensed under the MIT license.