Rescript-Tea 项目启动与配置教程

1. 项目目录结构及介绍

Rescript-Tea 项目的目录结构如下所示：

rescript-tea/
├── app/
│   ├── src/
│   │   ├── components/
│   │   │   └── ...
│   │   ├── main.res
│   │   └── ...
│   └── bsconfig.json
├── website/
│   ├── src/
│   │   └── ...
│   └── ...
├── packages/
│   └── ...
├── .gitignore
├── .prettierrc
├── .vscode/
│   └── ...
├── README.md
└── ...

• app/: 包含了 Rescript 应用程序的源代码。

  • src/: 存放所有的 Rescript 源文件，如组件和主程序文件。
  • bsconfig.json: 是 BuckleScript 的配置文件，用于指定编译选项和依赖。

• website/: 如果项目包含网站部分，这里的目录会存放网站的源代码。

• packages/: 存放项目的npm包或者Rescript库。

• .gitignore: 指定git应该忽略的文件和目录。

• .prettierrc: Prettier 的配置文件，用于统一代码风格。

• .vscode/: Visual Studio Code 的项目配置文件。

• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件位于 app/src/main.res。这个文件是 Rescript 应用的入口点，其中定义了应用的主体逻辑和组件。以下是一个简单的 main.res 文件示例：

// main.res

@react.component
let component = () => {
  <div>
    <h1>Rescript-Tea</h1>
    <p>欢迎来到 Rescript-Tea 应用。</p>
  </div>
};

let () = {
  ReactDom.render(React.createElement(component), document.getElementById("root"));
};

在上述代码中，我们定义了一个 React 组件，并将其渲染到页面的根元素中。

3. 项目的配置文件介绍

项目的配置文件主要是 app/bsconfig.json，它用于配置 BuckleScript 编译器。以下是一个典型的 bsconfig.json 配置示例：

{
  "src": "./src",
  "dev": true,
  "suffix": ".bs.js",
  "bsc-flags": ["-o", "es6", "-p", "src"],
  "refmt": 3,
  "package": {
    "name": "rescript-tea",
    "version": "1.0.0",
    "description": "Rescript-Tea 项目",
    "repository": {
      "type": "git",
      "url": "https://github.com/darklang/rescript-tea.git"
    }
  }
}

在这个配置文件中，我们指定了源代码目录、编译选项、输出格式、项目信息等。

• "src" 指定了源代码的目录。
• "dev" 表示是否为开发模式。
• "suffix" 设置了生成的 JavaScript 文件的扩展名。
• "bsc-flags" 包含了传递给 BuckleScript 编译器的标志。
• "refmt" 指定了代码格式化器的版本。
• "package" 包含了项目的元数据，如名称、版本和描述等。