写给跨端玩家：支撑淘宝上亿日活的跨端框架—— Rax 的入门教程（附 TODO Demo）

一些废话

沉寂了两个月，我又回来了。

跟你们猜的一样，我已经到淘系实习了一段时间了，从上一篇文章之后就放了更多的心思在工作上。上篇文章发出去之后，我去腾讯实习了一段时间，等待阿里实习生入职流程开启。

收到淘系的实习生 offer 后，我买了人生中的第一张机票，第一次坐上了飞机，来到了一个陌生的城市——杭州。干净的街道、宽敞的沥青马路，吸引了我这个来自小城市的年轻人。

博客很久没更新了，不管是个人的网站还是掘金，都很少有更新了，偶尔上掘金看看一些好文，总想更新一下，但又没找到好的题材。现在实习了一段时间后，上手了淘系的开源跨端框架——Rax，新奇又好玩，也总结了一些很基础的开发技巧，补充一下官方文档的缺漏（官方文档对于新手来讲确实不太友好）。

基础部分演示项目 Git 仓库：Rax-TODO

进阶技巧演示项目 Git 仓库：Software-Engineering（同时也是我的课程设计，欢迎大伙点个 Star）

前面的部分是针对只有一点 React 基础的同学的，高端玩家请点击：进阶技巧

项目环境

1. node >=10.3.0
2. npm >= 6.1.0

前置知识

1. JSX
2. Hooks
3. TypeScript（可选）
4. Jest（可选）
5. Enzyme（可选）

创建项目

初始化项目

这部分官网文档比较详细了，先看一下官网文档：快速开始

官网文档提供的方案还挺多的，可能会选择困难，我们就从最基础的 TODO 开始，使用 Rax 搭建一个 Web 项目：

npm init rax todo-list

选择项目类型

输入上面的命令之后，会使用 npx 安装 rax-cli 脚手架工具，安装完成后会弹出这样的界面：

added 106 packages from 53 contributors in 10.5s
? What's your project type? (Use arrow keys)
❯ App (Build universal application)
  Component (Build universal component)
  API (Build universal API library)
  Plugin (Build plugin for miniapp)

使用 上下键 移动箭头，后面的操作同理。

这里我们就直接使用默认的选项，创建一个 APP，按下回车。

选择应用运行平台

? Choose targets your project want to run? (Press <space> to select, <a> to togg
le all, <i> to invert selection)
❯◉ Web
 ◯ Weex
 ◯ Kraken (Flutter)
 ◯ Alibaba MiniApp
 ◯ WeChat MiniProgram

使用 空格键 选择，按下 字母a 可以全选，这里我们就先选择 Web，后续如果有编译为 Weex 和 小程序 的需求可以在项目目录的 build.json 中添加。

编译为 Flutter 应用的功能目前还不稳定，且坑比较多，建议动手能力强的玩家尝试，小白就先绕道吧。

选择应用类型

? What's your application type? (Only valid in target: Web/Weex/Kraken) (Use arr
ow keys)
❯ Single-page application (SPA)
  Multi-page application (MPA)
  Create lite application (The simplest project setup)

选择 APP 的类型，是 SPA 还是 MPA，这里的选项只在 Web/Weex/Kraken(Flutter) 应用中有效。

我们选择默认的选项 SPA，不明白 SPA 和 MPA 的区别的同学，可以移步文章：认识单页应用（SPA）与多页应用（MPA）

输入作者名字

? What's author's name? (rax): 炽翎

选择开发语言

? What type of language do you want to use? (Use arrow keys)
❯ JavaScript
  TypeScript

这里我们就先选择 JavaScript，后续如果有引入 TypeScript 的需求，可以手动引入。

开启特性

? Do you want to enable these features? (Press <space> to select, <a> to toggle
all, <i> to invert selection)
❯◯ Server-side rendering (SSR) (Only valid in target: Web)
 ◯ Aliyun Function Compute (FaaS) (Only valid in target: Web)
 ◯ Compatibility with React

这里我们就什么都不选。

当然，如果有需要我们可以选择 Compatibility with React 配置与 React 的兼容，也可以为我们的应用开启 服务端渲染（SSR）。如果有需求开启 Serverless，也可以选择开启 功能即服务（FaaS）。SSR 和 FaaS 都只能在 Web 应用中有效。

不懂 SSR 和 Serverless 的同学请自行百度（Google）哈。

自动安装依赖

? Do you want to install dependences automatically after initialization? (Y/n)

这里就直接回车，这个选项的意思是询问是否在初始化完成后自动安装依赖。默认是 Yes，就不用我们手动进入项目文件夹执行 npm install 了。

等待依赖安装完成

To run your app:
   cd todo-list
   npm start

当终端出现这一段文字的时候，就说明依赖安装完了，我们可以进入到项目的文件夹下，执行 npm start 跑起我们的项目。

启动项目

在执行 npm start 后，终端会显示：

Rax development server has been started:

[Web] Development server at:
    http://localhost:3333/

这时候我们就可以在浏览器输入 Dev Server 的地址，查看我们的项目了。

开始开发

随便选择一款自己喜欢的 IDE，进入项目的文件夹，我们会看到这样的一个目录结构：

.
├── README.md                   # 项目说明
├── build.json                  # 项目构建配置
├── package.json
└── src                         # 源码目录
    ├── app.js                  # 应用入口文件
    ├── app.json                # 应用配置，包括路由配置，小程序 window 配置等
    ├── public                  # (可选)静态资源目录，会拷贝内容至 build 目录
    ├── components              # 应用的公共组件
    │   └── Logo                # 组件
    │       ├── index.css       # Logo 组件的样式文件
    │       └── index.jsx       # Logo 组件 JSX 源码
    ├── document                # 页面的 HTML 模板
    │   └── index.jsx
    └── pages                   # 页面
        └── Home                # home 页面
            └── index.jsx

开发之前，我们需要了解一些 Rax 下的一些小规矩：

• rpx：默认以 750rpx 为屏幕宽度，即 1rpx = 1/750 * 屏幕宽度。
• 样式简写：在 Rax 中，由于目前兼容性的问题，不支持 部分 样式简写，例如：在写 border 样式时，应该将各个部分分开：border-width、border-style、border-color。在遇到属性简写在非 Web 平台不生效的问题时，尝试将属性分开或许就能解决问题。

删掉初始页面

我们要做的第一件事是删除初试化后默认的 Home 页面中的 Logo 组件，在 src/components 文件夹下，整个删除。

删除之后，src/pages/Home/index.jsx 肯定会报错，我们先稍作修改，改成 Hello World!。

// index.jsx
import { createElement } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

export default function Home() {
  return (
    <View className="home">
      <Text>Hello World!</Text>
    </View>
  );
}

这个时候会发现页面变成了 Hello World!，后面应该不用讲解太多，就是使用 React 应用开发的方式，开始愉快的 coding 过程。

可能你会发现，为什么在这里我们只能用 Rax 提供的 View 和 Text 组件？

因为为了使跨端显示效果一致，Rax 为开发者抹平了不同平台之间样式显示不一致的问题。

当然，如果你只是想用 Rax 做一个 Web 应用，那你可以使用 HTML 标签（汗）。

View 组件和 Text 组件的用法可以移步文档：