From ac42dec67e28d444279f8753d12bfe7e4fe4541e Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Wed, 20 Jul 2022 19:46:48 +0800 Subject: [PATCH 1/2] docs: update quick-start doc --- website/docs/quick-start.md | 50 ++++++++++++++++--- .../current/quick-start.md | 48 ++++++++++++++++-- website/package.json | 1 + 3 files changed, 88 insertions(+), 11 deletions(-) diff --git a/website/docs/quick-start.md b/website/docs/quick-start.md index 837202449..a3c7594e5 100644 --- a/website/docs/quick-start.md +++ b/website/docs/quick-start.md @@ -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 an 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 older 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: @@ -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: @@ -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: @@ -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: @@ -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'); diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md index 3eb2acfac..098495241 100644 --- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md +++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md @@ -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** 模板： @@ -29,7 +65,7 @@ npx create-react-app molecule-demo --template typescript cd molecule-demo ``` -## 安装 Molecule +### 安装 Molecule 然后，你需要安装 molecule 的依赖： @@ -41,7 +77,7 @@ npm install @dtinsight/molecule 这个命令会在 `molecule-demo` 项目中自动安装 Molecule 的依赖。 -## 基本使用 +### 基本使用 打开 `src/App.js` 文件，将该文件的内容替换成如下： @@ -75,7 +111,7 @@ root.render( 需要注意的是目前 Molecule 还无法与 `React.StrictMode` 兼容，所以我们需要在 `src/index.js` 中移除 `React.StrictMode`。 ::: -## 启动项目 +### 启动项目 最后，在终端中运行`start` 命令： @@ -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" diff --git a/website/package.json b/website/package.json index 74d8018bb..64ea851fe 100644 --- a/website/package.json +++ b/website/package.json @@ -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", From 1bfcb361956b335571ac812b3fe7ad5f13b8d12b Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Thu, 21 Jul 2022 10:19:22 +0800 Subject: [PATCH 2/2] docs: update typo --- website/docs/quick-start.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/quick-start.md b/website/docs/quick-start.md index a3c7594e5..7438f7c81 100644 --- a/website/docs/quick-start.md +++ b/website/docs/quick-start.md @@ -16,7 +16,7 @@ use the `node -v` command to view the current Node version. It is recommended to ## Create a Project in One Line -We provide an command line tool to create a project quickly. It uses [create-react-app](https://github.com/facebook/create-react-app) to create this project. +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