返回介绍

Lite 工程

发布于 2019-12-26 23:51:15 字数 2391 浏览 757 评论 0 收藏 0

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"
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文