Vite React ReScript 项目教程

2024-08-25 14:37:35作者：咎竹峻Karen

1. 项目的目录结构及介绍

vitejs-template-react-rescript/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   ├── App.res
│   ├── index.css
│   ├── main.res
│   └── vite-env.d.ts
├── tests/
│   └── App.test.res
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── rescript.json
├── tailwind.config.js
├── vite.config.mts

目录结构说明

public/: 存放公共资源文件，如 index.html。
src/: 项目的主要源代码文件夹，包含组件、样式文件和入口文件。
- components/: 存放 React 组件。
- App.res: 主应用组件。
- index.css: 全局样式文件。
- main.res: 应用入口文件。
- vite-env.d.ts: TypeScript 类型定义文件。
tests/: 存放测试文件。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证文件。
README.md: 项目说明文档。
package-lock.json: 依赖包锁定文件。
package.json: 项目依赖和脚本配置文件。
postcss.config.js: PostCSS 配置文件。
rescript.json: ReScript 配置文件。
tailwind.config.js: Tailwind CSS 配置文件。
vite.config.mts: Vite 配置文件。

2. 项目的启动文件介绍

入口文件

src/main.res: 这是项目的入口文件，负责渲染 App 组件并挂载到 index.html 中的根元素上。

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.res'
import './index.css'

ReactDOM.render(<App />, document.getElementById('root'))

主应用组件

src/App.res: 这是主应用组件，包含应用的主要逻辑和布局。

import React from 'react'
import './App.css'

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.res</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

3. 项目的配置文件介绍

Vite 配置文件

vite.config.mts: Vite 的主要配置文件，包含项目的基本配置、插件和构建选项。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import rescript from '@jihchi/vite-plugin-rescript'

export default defineConfig({
  plugins: [react(), rescript()],
  server: {
    port: 3000,
  },
})

ReScript 配置文件

rescript.json: ReScript 的配置文件，包含编译选项和路径映射。

{
  "name": "vitejs-template-react-rescript",
  "sources": {
    "dir": "src",
    "subdirs": true
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".mjs",
  "bs-dependencies": [
    "rescript-react"
  ],
  "warnings": {
    "number": "+101"
  }
}