跳到主要内容
版本：Next

快速开始

前置要求​

  • Node.js 12.13.0 + 版本
  • React.js 16.14.0 + 版本
  • Yarn
  • pnpm - 推荐使用 pnpm 作为包管理
info

可以通过 node -v 命令查看当前 Node 版本。 推荐在 Mac 系统中使用 nvm 来管理 Node.js 多版本

命令行创建项目​

你可以使用命令行工具快速创建一个自带 TypeScript 和你选择的脚手架项目.

npx​

npx @dtinsight/create

npx 要求 npm 的版本是 5.2+ 或更高, 低版本的 npm 使用方式参考

Yarn​

yarn create @dtinsight/

yarn create 要求 Yarn 的版本在 0.25+

pnpm​

pnpm create @dtinsight/

✔ 我们强烈推荐你使用 pnpm.

启动项目​

在等待一下后，你可以在终端看到 Downloading application successfully at 信息，则表示安装成功。

然后你只需要进入文件夹并安装依赖即可。

手动创建项目​

我们使用 React 官方推荐的 create-react-app 脚手架工具作为示例， 这里我们强烈推荐使用 Typescript 模板：

npx create-react-app molecule-demo --template typescript

这个命令会在当前目录下，创建一个叫 molecule-demo 的目录，切换到项目文件夹：

cd molecule-demo

安装 Molecule​

然后，你需要安装 molecule 的依赖：

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

这个命令会在 molecule-demo 项目中自动安装 Molecule 的依赖。

基本使用​

打开 src/App.js 文件，将该文件的内容替换成如下：

src/App.js
import React from 'react';
import { create, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

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

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

export default App;
是否可以与 React.StrictMode 兼容?
Molecule 从 v1.3.0 版本起可以与 React.StrictMode 兼容

所以请检查你的版本，如果是低于 1.3.0 则在 src/index.js 中移除 React.StrictMode 相关代码

启动项目​

最后，在终端中运行start 命令：

yarn start
# 或者 npm
npm run start

这个命令会自动在默认浏览器中打开 http://localhost:3000 这个地址，即可看到 Molecule 默认的 IDE 界面。

Quick Start

使用 Monaco Editor 语言包​

现在，你可以在浏览器中打开并看到 Molecule 的页面了，但是这仍然是远远不够的。如果你想要开发一个特定语法的 Web IDE 应用，你需要借助 Monaco Editor 的语言包来使得你的语法能够在 Web IDE 中高亮。

使用 Monaco Editor 的语言包，需要使用插件 monaco-editor-webpack-plugin，所以这里我们得扩展下 Webpack 的默认配置。 首先我们先安装 react-app-rewired 工具，然后在项目根目录创建一个config-overrides.js 文件，用来覆盖默认 Webpack 配置。 monaco-editor-webpack-plugin 插件具体使用如下：

config-overrides.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

/* config-overrides.js */
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.plugins = [
        ...config.plugins,
        new MonacoWebpackPlugin([
            'javascript',
            'typescript',
            'css',
            'html',
            'json',
        ]),
    ];

    return config;
};

完整的代码示例，请查看 molecule-demo 项目。