插件介绍

web_tool 是一个 Flutter Web 开发工具集合，专为自动化构建、部署和验证 Flutter Web 示例而设计。该工具提供了一套完整的 CI/CD 解决方案，支持批量构建多个 Flutter Web 示例、修复构建后的 HTML 基础标签、生成样本索引页面以及验证包的依赖和代码质量。

主要功能特点：

• 批量构建多个 Flutter Web 示例
• 自动化生成样本索引页面
• 修复构建后 HTML 文件中的 <base href> 标签
• 支持构建后处理，添加分析代码和自定义标题
• 验证所有包的依赖和代码质量
• 提供通用工具函数，如命令执行、日志记录和包目录列表

使用步骤

包的引入

由于这是一个自定义修改版本的三方库，需要以 git 形式引入。在引用的项目中，在 pubspec.yaml 文件的 dependencies 部分新增以下配置：

dependencies:
  web_tool:
    git:
      url: "https://atomgit.com/"
      path: "packages/web_tool/web_tool"

然后执行以下命令获取依赖：

flutter pub get

API 调用

web_tool 主要提供以下核心功能模块：

1. 批量构建示例 (build_ci.dart)

用于批量构建所有 Flutter Web 示例并生成样本索引页面：

import 'package:web_tool/build_ci.dart' as build_ci;

void main() async {
  // 执行批量构建
  await build_ci.main();
}

2. 修复基础标签 (fix_base_tags.dart)

用于修复构建后 HTML 文件中的 <base href> 标签：

import 'package:web_tool/fix_base_tags.dart' as fix_base_tags;

void main() async {
  // 修复基础标签
  await fix_base_tags.fixBaseTags();
}

3. 验证包 (verify_packages.dart)

用于验证所有包的依赖和代码质量：

import 'package:web_tool/verify_packages.dart' as verify_packages;

void main() async {
  // 验证包
  await verify_packages.main();
}

4. 使用通用工具函数 (common.dart)

import 'package:web_tool/common.dart';

void main() async {
  // 执行命令
  await run('working_dir', 'flutter', ['pub', 'get']);

  // 记录日志
  logWrapped(ansiGreen, '操作成功！');

  // 列出包目录
  var packageDirs = listPackageDirs(Directory.current);
  print('找到的包目录：$packageDirs');
}

鸿蒙适配注意事项

在鸿蒙环境中使用 web_tool 时，需要注意以下几点：

1. 环境配置：确保在鸿蒙开发环境中安装了 Flutter 和 Dart SDK，版本需满足 sdk: ^3.1.0 要求。

2. 文件路径：鸿蒙系统对文件路径有严格限制，需确保 web_tool 中的路径处理函数能够正确处理鸿蒙系统的文件路径格式。

3. 命令执行权限：在鸿蒙系统中执行外部命令时，需要确保应用具有相应的权限。

4. 网络访问：如果需要从网络获取依赖或资源，需确保应用具有网络访问权限。

5. 构建目标：在鸿蒙系统中构建 Flutter Web 应用时，需确保构建目标兼容鸿蒙系统的 Web 运行环境。

示例用法

批量构建所有 Flutter Web 示例

// 导入必要的库
import 'package:web_tool/build_ci.dart' as build_ci;

void main() async {
  try {
    // 执行批量构建
    await build_ci.main();
    print('所有 Flutter Web 示例构建完成！');
  } catch (e) {
    print('构建过程中出现错误：$e');
  }
}

自定义构建和验证流程

// 导入必要的库
import 'dart:io';
import 'package:path/path.dart' as p;
import 'package:web_tool/common.dart';

void main() async {
  try {
    // 获取当前目录下的所有包
    final packageDirs = listPackageDirs(Directory.current)
        .map((path) => p.relative(path, from: Directory.current.path))
        .toList();

    print('找到的包：$packageDirs');

    for (var dir in packageDirs) {
      logWrapped(ansiMagenta, '处理包：$dir');

      // 获取依赖
      await run(dir, 'flutter', ['pub', 'get']);

      // 分析代码
      await run(dir, 'flutter', ['analyze', '--fatal-infos', '--fatal-warnings', '.']);

      // 构建 Web 应用
      await run(dir, 'flutter', ['build', 'web']);

      logWrapped(ansiGreen, '包 $dir 处理完成！');
    }

    print('所有包处理完成！');
  } catch (e) {
    print('处理过程中出现错误：$e');
  }
}

总结

web_tool 是一个功能强大的 Flutter Web 开发工具集合，为开发者提供了一套完整的 CI/CD 解决方案。通过使用 web_tool，开发者可以轻松地批量构建、部署和验证 Flutter Web 示例，提高开发效率和代码质量。

在鸿蒙环境中使用 web_tool 时，需要注意环境配置、文件路径处理、命令执行权限、网络访问和构建目标等方面的问题。通过正确配置和使用 web_tool，开发者可以在鸿蒙系统上高效地开发和部署 Flutter Web 应用。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net