Molecule은 React.js로 구축되었으며 VSCode에서 영감을 받은 경량 웹 IDE UI 프레임워크입니다. 개발자가 워크벤치를 더 쉽게 확장할 수 있도록 VSCode와 유사한 확장 API를 설계했습니다. Molecule을 React.js 애플리케이션과 통합하는 것이 편리합니다. DTStack의 많은 제품들에 이 코드가 적용되었습니다.
- Visual Studio Code 워크벤치 UI 제공
(https://code.visualstudio.com/api/extension-capabilities/extending-workbench) - VSCode ColorTheme 와 호환
- React Component를 통해 워크벤치를 쉽게 사용자 정의
- Monaco-Editor Command Palette, Keybinding 기능 내장
- i18n 지원, 중국어 간체, 영어 , 한국어 지원
- 설정 지원 , Extension을 통한 편집 및 확장 지원
- 기본 Explorer, Search 컴포넌트 지원, Extension을 통환 확장 지원
- Typescript 지원
npm install @dtinsight/molecule
# Or
yarn add @dtinsight/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 = () => moInstance.render(<Workbench />);
ReactDOM.render(<App />, document.getElementById('root'));
extension
은 확장 응용 프로그램 항목입니다. 확장에 대한 자세한 내용은 빠른 시작을 참조하십시오.
git clone git@github.com:DTStack/molecule.git
로컬에 소스코드를 클론 하세요
개발 모드
yarn # Install dependencies
yarn dev # Start dev mode
Molecule은 React 컴포넌트를 개발,관리하기 위해 Storybook을 사용합니다.
기본 링크는 http://localhost:6006/
입니다.
테스트
yarn test -u
빌드 & 미리보기
yarn build # Compile to ESM
yarn web # Web Preview Mode
소스 코드를 ES6 모듈로 컴파일하고 esm
폴더에 출력 합니다. 스토리북 개발 모드 외에도 ESM 모듈을 사용하는 Web Preview 모드도 내장되어 있습니다.
자세한 사항은 기여을 참조하세요.
Copyright © DTStack. All rights reserved.
MIT 라이선스에 따라 라이선스가 부여됩니다.