Rax新手入门 - 快速构建多端应用

￡神魔★判官ぃ 2023-07-20 08:14 19阅读 0赞

## 一. 准备 ##

首先，需要去官网熟悉一下快速开始 [Rax官网][Rax]

**1.创建项目**

npm init rax rax-demo-3

注：rax-demo-3换成自己需要的项目名

**2.创建选项**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70]  
创建项目的时候会有一堆选项，蓝色字体是选项结果，你可以根据需求不同，选择不同的选项

**3.项目建成**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 1]  
看到这个提示之后，项目就建成ok！

## 二. 重点记录 ##

通过第一步之后，会生成项目结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 2]  
**重点看下build.json项目**

{ 
      "plugins": [
        [
          "build-plugin-rax-app",
          { 
            "targets": ["miniapp"]
          }
        ]
      ]
    }

因为建的时候，第5个选项只选了Alibaba MiniApp，所以这里只有miniapp

从Rax官网看，目前可以支持5个选项，并且可以同时配置（官网没有写枚举，生成的时候选了才看到）

"targets": ["miniapp", "web", "weex", "wechat-miprogram", "kraken"]

*  **miniapp** 就是阿里系小程序（支付宝小程序、天猫精灵小程序）
 *  **web** web页面
 *  **weex** 貌似是app原生可以转换的，具体见[Week官网][Week]
 *  **wechat-miprogram** 微信小程序
 *  **kraken** 一款轻量级的面向前端网络开发人员的框架

## 三. 构建其他项目 ##

生成项目之后，会在项目目录的上一层，我们要进入到项目层去操作

cd rax-demo-3

然后安装依赖

npm install

安装ok之后，生成其他类型项目

npm run build

运行结束之后，可以看到，文件夹里多了一个build目录，里面会根据targets配置了几个枚举，生成几个对应类型的项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 3]

## 四. 构建项目查看 ##

使用支付宝IDE开发工具查看了支付宝小程序miniapp工程，可以正常展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 4]

[Rax]: https://rax.js.org/docs/guide/getting-start
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70]: /images/20230528/26de176fd0e846e6827659975bc59c1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 1]: /images/20230528/bcb9e8d3e92a4f6eaa766d8dbe03c919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 2]: /images/20230528/fb60c53b5b2c4fdf997c12148432fd35.png
[Week]: https://weex.apache.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 3]: /images/20230528/5f695ae0944b47599929c2852591a674.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODIzNA_size_16_color_FFFFFF_t_70 4]: /images/20230528/2623976f6130411d85c2752acab6455e.png