Skip to main content

本地调试

命令

使用skr dev可以打开一个webpack-dev-server进行本地的调试。

参数

--cwd [value]            指定当前工作目录,默认为当前目录
--mode [value] 设置构建的环境模式,可以为development或production,默认为development
--config [value] 使用指定的配置文件,默认查找reskript.config.{ts,mjs}
--env-file [value...] 提供一个或多个自定义的环境变量(.env)文件
--src-dir [value] 指定项目源码所在的目录,默认为src
--build-target [value] 指定调试的特性名称,默认为dev
--proxy-domain [domain] 设置后端API代理的目标地址,用来覆盖项目配置文件中的devServer.defaultProxyDomain配置
--host [value] 设置默认的本地服务器域,可以用localhost、loopback(对应127.0.0.1)、ip(对应本机的局域网IP),也可以指定一个自定义的域名或IP
--entry [value] 指定用来调试的入口,即在src/entries下的文件名(不包含后缀名),默认为index
--strict 打开严格模式,会稍微影响编译速度,增加更多对源码和依赖的检测
--open 默认会打开浏览器,使用--no-open可以禁用自动打开功能
-h, --help 显示帮助信息

除命令行参数外,项目配置文件中的devServer配置也会影响构建的行为。

本地与线上差异

有时候,在本地开发调试非常成功的项目,部署到线上会出现页面打不开等问题,这往往是以下的原因引起的:

  • 因为本地调试与线上版本的特性集声明不同,导致一些分支判断问题。
  • webpackproduction模式下启用了大量优化,某些优化造成最终产物出现问题。

这时候,你可以使用--mode--build-target参数来实现本地调试与线上环境的完全一致,比如:

skr dev --mode=production --build-target=stable

上面的命令就可以指定线上版本的stable特性集,且打开所有的生产环境优化来进行本地调试,理论上线上的问题均能复现,除非是因为微前端集成等运行环境不同产生的。

当然,打开--mode=production会非常严重地影响本地构建的速度,同时也会让热更新等功能失效,所以正常情况下没必要开启这个参数。

调试其它入口

假设应用有src/entries/index.tsxsrc/entries/mobile.tsx两个入口,默认情况下使用skr dev只能调试到index这个入口,另一个入口是无法被访问到的。

你可以使用skr dev --entry=mobile来启动调试服务器并将mobile.tsx指定为入口。

一次调试仅能指定一个入口,考虑到路由冲突(如index入口中有/mobile这个路由,同时又有mobile这个入口),当前无法同时调试多入口。

严格模式

当使用--strict参数后,构建会进入严格模式,请参考配置解密 - 严格模式了解这个开关的作用。

远程开发

如果你处在一个远程开发的环境,包括但不限于使用远程桌面、VSCode Remote等,此时你在启动本地调试环境后,是无法用localhost:8080来访问到页面的。

你可以使用--host=ip参数来让skr dev默认打开远程IP的页面:

skr dev --host=ip

reSKRipt会找到机器上一个可用的IP地址,绝大部分情况下这个IP是正确的,如果出现一些原因导致IP无法访问,你就不得不自己研究如何访问到开发机了。

由于在大部分的公司环境里用的是动态的IP分配,一台电脑的IP是会变化的,所以如果你是在自己的电脑上启动调试,最好不要去使用IP访问,避免休眠再开机后因为IP变化导致页面访问不到。

微前端开发

如果你本地启动的应用会被另一个地址的微服务框架加载,那么默认的使用/assets作为路径的资源都会在另一个地址上失效。此时同样可以使用--host参数进行兼容,即便是本地开发,你也可以这样使用:

skr dev --host=localhost

此时虽然依然通过http://localhost:8080访问你的应用,但所有的资源路径都会被强制设定为http://localhost:8080/assets/*这样的绝对地址,因此在另一个IP、域名、端口下也可以顺利加载。