Lite 工程

优质

小牛编辑

163浏览

2023-12-01

Lite 工程是一个最简化的 Rax 工程，没有复杂的配置，默认也没有路由系统。基于 Rax 的 CLI 工具，可以快速开始创建 Lite 项目进行开发。

应用初始化

执行 npm init rax <projectName>，在应用类型中选择 Lite App 即可：

$ npm init rax lite-app
What's your project typeApp (Build application that works multi-platform)
What's your application typeLite App (The simplest possible setup)
What's author's namerax
Do you want to install dependences automatically after initializationNo
Creating a new Rax project in /Projects/lite-app

初始化完成后，进入应用目录并安装依赖，即可开始开发：

$ cd lite-app
$ npm install
$ npm start

目录结构

Lite 工程目录结构如下：

.
├── README.md                   # 项目说明
├── build.json                  # 项目构建配置
├── package.json
└── src                         # 源码目录
    ├── app.js                  # 应用入口文件
    └── document                # 页面的 HTML 模板
        └── index.jsx

与标准工程不同，Lite 工程没有 app.json 文件，入口文件 app.js 中也无需依赖 rax-app：

import { createElement, render } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import DriverUniversal from 'driver-universal';

const App = () => {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
};

render(<App />, null, { driver: DriverUniversal });

升级为标准工程

随着应用复杂度提高，开发者可能希望使用路由系统或其他标准工程的能力，这时候需要对应用进行一定的修改：

第一、安装 rax-app 依赖： npm install rax-app --save；
第二、增加 app.json 文件，配置 routes（必选）及其他选项，具体配置可参考应用配置；
第三、修改入口文件 app.js 文件，将 app.json 中的 UI 逻辑抽离到 src/pages 目录下，按页面路由合理拆分，在 app.js 引入 rax-app 中的 runApp 方法和 app.json，将 app.json 作为参数传入 runApp 中即可：

// app.js
import { runApp } from 'rax-app';
import appConfig from './app.json';

runApp(appConfig);

// app.json
{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ],
  "window": {
    "defaultTitle": "Rax App 1.0"
  }
}