Flutter构建Web时如何为Packages生成Source Map？

默认使用flutter build web --source-maps构建时，生成的Source Map仅包含项目自身代码的映射，不会涵盖依赖包（Packages）的内容。要把Packages的代码也纳入进来，有两种可行方法：

方法一：添加构建参数强制生成完整映射 #

在构建命令中加入--dart-define=FLUTTER_WEB_SOURCE_MAPS=true参数，即可让Flutter生成包含所有依赖包代码的Source Map。完整命令如下：

flutter build web --source-maps --dart-define=FLUTTER_WEB_SOURCE_MAPS=true

⚠️ 注意：该操作会大幅增加构建产物的体积，因为要包含所有依赖的源码映射，建议仅在开发调试阶段使用，生产环境需谨慎考虑。

方法二：通过build.yaml配置精细控制 #

如果需要更灵活的配置，可以在项目根目录创建或修改build.yaml文件，添加以下内容：

targets:
  $default:
    builders:
      build_web_compilers|dart2js:
        options:
          source_maps: true
          preserve_uris: true  # 保留所有包的URI，从而包含其源码映射

配置完成后，再次执行flutter build web --source-maps命令，生成的Source Map就会包含Packages的代码信息。

两种方法都能实现需求，但都会导致Source Map文件变大，调试时浏览器加载速度可能略有下降，不过能完整映射所有代码，方便排查依赖包中的问题。

内容的提问来源于stack exchange，提问作者Amir M