8000 docs: update quick-start doc by mortalYoung · Pull Request #785 · DTStack/molecule · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

docs: update quick-start doc #785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
10000
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 44 additions & 6 deletions website/docs/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,43 @@ sidebar_position: 2
use the `node -v` command to view the current Node version. It is recommended to use [nvm](https://github.com/nvm-sh/nvm) on Mac systems to manage multiple versions of Node.js.
:::

## Create a Project
## Create a Project in One Line

We provide a command line tool to create a project quickly. It uses [create-react-app](https://github.com/facebook/create-react-app) to create this project.

### npx

```bash
npx @dtinsight/create molecule-demo
```

Or create the project based on the **TypeScript** template

```bash
npx @dtinsight/create molecule-demo -t
```

_[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for old 10000 er npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)_

### Yarn

```bash
yarn create @dtinsight/ molecule-demo
```

Or create the project based on the **TypeScript** template

```bash
yarn create @dtinsight/ molecule-demo -t
```

_`yarn create` is available in Yarn 0.25+_

### Startup Project

After waiting a second, you could see `Happy coding!😊` in terminal. And then just following the guide to start up your project.

## Create a Project Manually

We use the [create-react-app](https://github.com/facebook/create-react-app) scaffolding tool officially recommended by React as an example,
Here we **strongly recommend** the use of the **Typescript** template:
Expand All @@ -29,7 +65,7 @@ This command will create a directory called `molecule-demo` in the current direc
cd molecule-demo
```

## Install Molecule
### Install Molecule

Then, you need to install the dependency of molecule:

Expand All @@ -41,7 +77,7 @@ npm install @dtinsight/molecule

This command will automatically install Molecule's dependencies in the `molecule-demo` project.

## Basic Use
### Basic Use

Open the `src/App.js` file and replace the contents of the file with the following:

Expand Down Expand Up @@ -75,7 +111,7 @@ root.render(
It's **noticed** that the Molecule for now is not compatible with `React.StrictMode`. So we should remove `React.StrictMode` from `src/index.js`.
:::

## Startup Project
### Startup Project

Finally, run the `start` command in the terminal:

Expand All @@ -91,8 +127,10 @@ This command will automatically open the address [http://localhost:3000](http://

## Use Monaco Editor language pack

To use the language pack of Monaco Editor, you need to use the plug-in `monaco-editor-webpack-plugin`, so here we have to extend the default configuration of **Webpack**.
First, we first install the [react-app-rewired](https://github.com/timarney/react-app-rewired) tool, and then create a `config-overrides.js` file in the project root directory to override the default Webpack configuration. The specific usage of the `monaco-editor-webpack-plugin` plugin is as follows:
Now, you can see the page in browser, but that's not enough. If you want to develop an Web IDE with specific language. You should use the language pack of Monaco Editor to highlight the language in Web IDE.

To use the language pack of Monaco Editor, you need to use the plugin [`monaco-editor-webpack-plugin`](https://www.npmjs.com/package/monaco-editor-webpack-plugin), so here we have to extend the default configuration of **Webpack**.
First, we install the [react-app-rewired](https://github.com/timarney/react-app-rewired), and then create a `config-overrides.js` file in the project's root directory to override the default Webpack configuration. The specific usage of the `monaco-editor-webpack-plugin` plugin is as follows:

```js title="config-overrides.js"
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,43 @@ sidebar_position: 2
可以通过 `node -v` 命令查看当前 Node 版本。 推荐在 Mac 系统中使用 [nvm](https://github.com/nvm-sh/nvm) 来管理 Node.js 多版本
:::

## 创建项目
## 命令行创建项目

我们提供了命令行工具快速创建 Molecule 项目。该工具是基于 [create-react-app](https://github.com/facebook/create-react-app) 创建项目的

### npx

```bash
npx @dtinsight/create molecule-demo
```

或者你需要创建一个基于 **TypeScript** 的项目

```bash
npx @dtinsight/create molecule-demo -t
```

_[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) 要求 npm 的版本是 5.2+ 或更高, [低版本的 npm 使用方式参考](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)_

### Yarn

```bash
yarn create @dtinsight/ molecule-demo
```

或者你需要创建一个基于 **TypeScript** 的项目

```bash
yarn create @dtinsight/ molecule-demo -t
```

_`yarn create` 要求 Yarn 的版本在 0.25+_

### 启动项目

在等待安装依赖一会儿后,终端显示 `Happy coding!😊` 则表示安装成功。接下来只需要按照终端上的向导启动项目即可。

## 手动创建项目

我们使用 React 官方推荐的 [create-react-app](https://github.com/facebook/create-react-app) 脚手架工具作为示例,
这里我们**强烈推荐**使用 **Typescript** 模板:
Expand All @@ -29,7 +65,7 @@ npx create-react-app molecule-demo --template typescript
cd molecule-demo
```

## 安装 Molecule
### 安装 Molecule

然后,你需要安装 molecule 的依赖:

Expand All @@ -41,7 +77,7 @@ npm install @dtinsight/molecule

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

## 基本使用
### 基本使用

打开 `src/App.js` 文件,将该文件的内容替换成如下:

Expand Down Expand Up @@ -75,7 +111,7 @@ root.render(
需要注意的是目前 Molecule 还无法与 `React.StrictMode` 兼容,所以我们需要在 `src/index.js` 中移除 `React.StrictMode`。
:::

## 启动项目
### 启动项目

最后,在终端中运行`start` 命令:

Expand All @@ -91,7 +127,9 @@ npm run start

## 使用 Monaco Editor 语言包

使用 Monaco Editor 的语言包,需要使用插件 `monaco-editor-webpack-plugin`,所以这里我们得扩展下 **Webpack** 的默认配置。
现在,你可以在浏览器中打开并看到 Molecule 的页面了,但是这仍然是远远不够的。如果你想要开发一个特定语法的 Web IDE 应用,你需要借助 Monaco Editor 的语言包来使得你的语法能够在 Web IDE 中高亮。

使用 Monaco Editor 的语言包,需要使用插件 [`monaco-editor-webpack-plugin`](https://www.npmjs.com/package/monaco-editor-webpack-plugin),所以这里我们得扩展下 **Webpack** 的默认配置。
首先我们先安装 [react-app-rewired](https://github.com/timarney/react-app-rewired) 工具,然后在项目根目录创建一个`config-overrides.js` 文件,用来覆盖默认 Webpack 配置。 `monaco-editor-webpack-plugin` 插件具体使用如下:

```js title="config-overrides.js"
Expand Down
1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"start:chinese": "docusaurus start --locale zh-CN",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
Expand Down
0