3.2.3常用脚本

常用脚本

在项目中,为了更快捷的进行操作和实现功能,我们将部分功能封装成了脚本,方便使用。

在项目的 package.json 中,我们可以看到一些脚本命令,有些是 npm 自带的,有些是我们自定义的。

在项目根目录下,有一个scripts文件夹,里面存放了被定制过的脚本。

start

启动项目

npm start

这个命令我们在上一节已经使用过了,它会启动一个开发服务器。

当运行这个命令时,会执行 scripts 文件夹下的 devStart.js 文件。

这个脚本中,核心还是调用了 npx craco start 命令。

使用 craco 的目的是为了在不 eject 的情况下,修改 webpack 配置。

除此之外,还获取了一下当前开发机器可用的局域网 IP 地址,然后打印出来,在控制台显示二维码,方便快速扫码设置会话信息。

可用的局域网定义是:192 和 172 开头的 IP 地址。在特殊情况下,如需定制,请在 .env.local文件中添加REMOTE_IP_PREFIX 变量。 例如:REMOTE_IP_PREFIX=10.11 设置前请确保设备可以正常访问

buildCard

构建卡片

npm run buildCard [cardPath]

从卡片源码中打包构建卡片产物,生成 zip 资源包,存放在 ${process.env.OUTPUT_DIST} 文件夹下(文件夹默认是根目录下的/dist),详细可以参考环境变量的OUTPUT_DIST字段。

使用该命令的时候,需要传入一个参数,即卡片名称。例如:

npm run buildCard Hello

其中,Hello 是需要打包的卡片的源代码路径,是相对于 src/@remote 文件夹的路径。例如:src/@remote/Hello

如果不传入参数,也可以通过环境变量 CARD_NAME 来指定卡片名称。详细请参考 环境变量章节的BUILD_CARD字段。

注意,[cardPath] 支持多个组件路径,使用逗号分隔,例如:npm run buildCard Hello,World。这对于需要同时构建多个卡片的场景下,有很大的帮助。

docs:dev

启动文档服务

启动文档服务前,请确保已经安装了docs文件夹下的依赖。 请在docs文件夹下执行npm install 命令。

npm run docs:dev

该命令会启动一个文档服务,用于开发时查看文档。端口是 10086

lint

代码检查

npm run lint

该命令会检查项目中的代码规范,包括代码风格、代码质量等。建议提交代码前,先执行一下这个命令。

build:AppLoader

为 APPLoader 构建产物

npm run build:AppLoader

该命令会构建一个 APPLoader 可以使用的产物,存放在 widget/vpah5 文件夹下。

其核心动作是调用了 scripts 文件夹下的 buildVpa.js 脚本。同时设置了环境变量 process.env.REACT_APP_WITHOUT_INIT = 'no',以便在构建时,使用当前.config中的配置。

此模式下会携带当前开发的配置信息,并且注入到包内,同时在运行过程中,xiaoyouLight模块会去调用 init 去注册会话信息。因为在 APPLoader 中,没有友空间的会话信息,所以需要手动注册。

同时此模式也将用于 electron 的本地调试的产物。

build:YouZone

为友空间构建产物

npm run build:YouZone

此模式下,会构建一个友空间可以使用的产物,存放在 ${process.env.OUTPUT_DIST}/YonZone 文件夹下。详情可以参考环境变量章节的OUTPUT_DIST字段。

特点是:不会携带当前开发的配置信息,也不会注入到包内,同时在运行过程中,xiaoyouLight模块不会去调用 init 去注册会话信息。因为在友空间中,已经有会话信息了,不需要手动注册。

也可以看做是正式的 release 版本。

构建完成后,会自动打包成 zip 包,命名为 vpah5_日期.时间.zip,存放在 ${process.env.OUTPUT_DIST}/YonZone 文件夹下,便于进一步发版和上传。

wifiStart

开启 wifi 同步服务

npm run wifiStart

该命令会开启一个 wifi 同步服务,用于在移动端 APPLoader 调试。

在什么情况下需要使用这个命令呢? 因为在 APPLoader 中,我们使用的xiaoyouLight 模块是原生模块,这部分的功能是使用原生代码实现的,所以在开发过程中,需要在真机上进行调试。 在友空间移动端上,正是使用的这个模块进行网络请求、文件下载解压等操作。 另外在 APPLoader 和友空间移动端中,打开新窗口都是使用了多窗口机制,而不是 SPA 下的路由切换。 涉及到多窗口的通信和数据共享,如果使用到了这些功能,需要特别注意。

开启 wifi 同步服务后,会在控制台打印出二维码,用于在移动端 AppLoader 中设置会话信息。可以使用 APPLoader 扫录,也可以手动输入 IP 地址和端口号。

最新的 APPLoader 下载地址信息:

wifiSync:dev

同步开发到 APPLoader

npm run wifiSync:dev

运行该命令后,将会以 widget/config.xml 文件为模板,生成一个新的临时入口文件,存放在 widget/.apicloud/dev 文件夹下。

其中,新的config.xml 文件中的 content 标签的 src 属性会被替换为当前开发机器的 IP 地址和端口号。

然后将 widget/.apicloud/dev 文件夹下的文件,同步到 APPLoader 中。 因为目录下仅有一个 config.xml 文件,所以同步比较快。 而且入口地址是开发服务地址,所以改动代码后,在 APPLoader 中也保存热更相关服务,可以实时看到效果。

wifiSync:build

同步构建产物到 APPLoader

npm run wifiSync:build

运行该命令前,需要先运行 npm run build:AppLoader 命令,构建一个 APPLoader 可以使用的产物,存放在 widget/vpah5 文件夹下。

运行该命令后,将会把 widget/ 文件夹下的文件,同步到 APPLoader 中。

此时,在 APPLoader 中使用的入口文件是 widget/config.xml 文件。 里面的 content 标签的 src 属性是指向 widget/vpah5 文件夹下的 index.html 文件。 也就是模拟整包打包后运行在移动端的情况。

可以注意到,这个命令和 wifiSync:dev 命令的区别在于,这个命令是同步构建产物,而不是开发服务。

analyze

分析构建产物

npm run analyze

该命令用于检查底包的资源占用情况,以便优化底包体积。

electron:dev

本地调试 electron

运行该命令前,需要先在src/webview-demo文件夹下,执行npm install命令,安装依赖。 由于 electron 模块下载速度较慢,容易出问题,且不是主要路径,特此将其放在了src/webview-demo 文件夹下。 webview-demo 目录是友空间 PC 端提供的一个 demo,用于模拟在 PC 端的运行情况。

npm run electron:dev

使用 electron 环境进行本地调试。


adb:push

当前命令已经废弃,不再使用。请使用资源管理平台更新底包测试。

【废弃】使用 adb 推送产物

npm run adb:push

运行该命令前,需要先运行 npm run build:YouZone 命令,构建一个友空间可以使用的产物,存放在 ${process.env.OUTPUT_DIST}/YonZone 文件夹下。

运行该命令后,将会把 ${process.env.OUTPUT_DIST}/YonZone 文件夹下的文件,推送到友空间中。

adb:delete

当前命令已经废弃,不再使用。因为adb:push 命令已经废弃,所以这个命令也就没有意义了。

【废弃】清空 adb 产物

npm run adb:delete
是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10