开源项目 `hello-reason` 使用教程

开源项目 hello-reason 使用教程

hello-reasonan example esy-powered Reason project项目地址:https://gitcode.com/gh_mirrors/he/hello-reason

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

hello-reason/
├── .gitignore
├── README.md
├── bsconfig.json
├── package.json
├── src/
│   ├── Demo.re
│   └── Index.re
└── webpack.config.js

• .gitignore: Git 忽略文件配置。
• README.md: 项目说明文档。
• bsconfig.json: BuckleScript 配置文件。
• package.json: Node.js 项目配置文件，包含依赖和脚本。
• src/: 源代码目录。
  • Demo.re: 示例代码文件。
  • Index.re: 入口文件。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/Index.re。这个文件是整个项目的入口点，负责初始化和启动应用。

ReactDOMRe.renderToElementWithId(<Demo />, "root");

这段代码将 Demo 组件渲染到 ID 为 root 的 DOM 元素中。

3. 项目的配置文件介绍

bsconfig.json

BuckleScript 配置文件，定义了项目的基本配置和编译选项。

{
  "name": "hello-reason",
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "bs-dependencies": [
    "reason-react"
  ],
  "reason": { "react-jsx": 3 },
  "refmt": 3
}

• name: 项目名称。
• sources: 源代码目录配置。
• bs-dependencies: 项目依赖。
• reason: Reason 语言配置。
• refmt: Reason 格式化工具版本。

package.json

Node.js 项目配置文件，包含项目的基本信息、依赖和脚本。

{
  "name": "hello-reason",
  "version": "0.1.0",
  "scripts": {
    "build": "bsb -make-world",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world",
    "serve": "webpack-dev-server"
  },
  "dependencies": {
    "reason-react": "^0.9.1"
  },
  "devDependencies": {
    "bs-platform": "^8.4.2",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

• scripts: 定义了项目的构建、启动和清理脚本。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

webpack.config.js

Webpack 配置文件，定义了项目的打包规则和开发服务器配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/Index.re',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.re$/,
        exclude: /node_modules/,
        use: {
          loader: 'bs-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

• entry: 入口文件。
• output: 输出配置。
• module: 模块加载规则。
• plugins: 插件配置。
• devServer: 开发服务器配置。

以上是 hello-reason 项目的详细使用教程，涵盖了目录结构、启动文件和配置文件的介绍。希望对

hello-reasonan example esy-powered Reason project项目地址:https://gitcode.com/gh_mirrors/he/hello-reason