Flutter应用集成js插件实现Web端文件存盘，执行flutter test提示dart:js导出未找到

• 开发Flutter应用时，编写了web.dart文件封装webSaveAs方法，用于Web端实现文件保存到本地的能力，核心实现代码如下：

@JS()
library main;

import 'package:js/js.dart';
import 'package:universal_html/html.dart';

/// 为`webSaveAs`添加注解，以调用JavaScript侧的`window.webSaveAs`方法
@JS('webSaveAs')
external void webSaveAs(Blob blob, String fileName);

• 执行测试时，只要通过flutter test命令运行任何导入了上述webSaveAs方法的组件测试用例，就会抛出编译错误：

./../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3-nullsafety.3/lib/js.dart:8:1: Error: Not found: 'dart:js'

报错触发位置的代码为：export 'dart:js' show allowInterop, allowInteropCaptureThis;

• 环境校验结果：
  • 项目当前依赖版本为^0.6.2的js插件
  • 执行flutter doctor全链路检查无异常，开发环境为Flutter beta 1.25.0-8.3.pre版本，运行于macOS 11.2.1平台

• dart:js是仅Web渲染环境可识别的内置SDK库，flutter test默认在纯Dart VM环境下执行用例，该环境根本不存在dart:js的具体实现
• 当前代码没有做平台隔离，web.dart中的package:js依赖会被测试环境静态引入——哪怕测试过程中根本没有实际调用webSaveAs方法，只要文件被import，就会连带触发package:js内部导出dart:js的逻辑，最终报“找不到库”的编译错误

• 按Flutter平台代码规范拆分文件，做平台依赖隔离，避免纯Dart测试环境静态加载Web专属代码：
  1. 新建纯Dart无平台依赖的抽象定义文件，仅声明通用的文件保存抽象接口，不引入任何Web专属依赖
  2. 将原先带@JS注解、依赖package:js和universal_html的Web端webSaveAs实现，全部挪到独立的Web专属实现文件中
  3. 为非Web端（VM/移动平台）新建独立的实现文件，提供对应平台的文件保存逻辑或空实现
• 用Dart内置的条件导出语法替换原先硬引入Web实现的写法，在编译阶段根据目标平台自动加载匹配的实现，避免测试环境加载Web专属依赖：
  示例代码：

  // 通用逻辑层的引入规则
  export 'file_saver_io.dart'
    if (dart.library.html) 'file_saver_web.dart'
    if (dart.library.js_interop) 'file_saver_web.dart';
  

  这种写法下，纯Dart VM环境执行flutter test时，只会加载无平台依赖的IO实现文件，不会触发Web端专属的dart:js依赖加载，从根源上避免编译报错
• 针对确实需要验证Web端逻辑的测试用例，单独指定Web测试运行环境，不要走默认的VM测试通道：执行测试命令时增加参数-d chrome，指定用Chrome作为测试执行设备，这类环境本身具备dart:js的实现，不会报找不到库的错误
• 额外校验依赖版本：检查pubspec.yaml中的js插件版本约束，避免版本范围解析偏差拉取了预览版的js依赖（比如报错日志中出现的0.6.3-nullsafety.3空安全预览版本），可以将js插件版本锁定到和当前Flutter SDK匹配的稳定版本，减少版本解析带来的无关问题

内容的提问来源于stack exchange，提问作者Eranga Heshan