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/11/18