Flutter开发辅助插件shelf

Flutter开发辅助插件shelf_dev的使用

shelf_dev 是一个用于客户端和服务器应用程序开发的Dart工具。

安装

[flutter] pub global activate shelf_dev

使用

运行 shelf_dev 必须在一个包含 shelf_dev.yaml 配置文件的目录中进行。

查看 shelf_dev 的配置格式获取更多信息。

在运行过程中，按下这些键 — “r”, “R” — 将传递给 “web-app” 目标。当与 flutter run 结合使用时，这会导致热重启。

当按下这些键 — “s”, “S” — 时，shelf_dev 将尝试重启 “web-server” 目标。

其他选项：

-?, --help 打印出使用信息。
--version 打印出可执行文件的版本。

示例代码

以下是一个完整的示例，展示了如何使用 shelf_dev 插件进行开发。

目录结构

my_project/
├── lib/
│   └── main.dart
├── shelf_dev.yaml
└── pubspec.yaml

`shelf_dev.yaml` 配置文件

# shelf_dev.yaml
targets:
  web-app:
    entrypoint: lib/main.dart
  web-server:
    entrypoint: server/main.dart

`lib/main.dart` 文件

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shelf Dev Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Shelf Dev Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

`server/main.dart` 文件

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;

void main() async {
  final handler = const Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);

  final port = int.parse(Platform.environment['PORT'] ?? '8080');
  final server = await io.serve(handler, 'localhost', port);
  print('Server listening on port ${server.port}');
}

Response _echoRequest(Request req) {
  return Response.ok('Hello, World from Server!');
}

运行项目

首先确保你已经安装了 shelf_dev：

[flutter] pub global activate shelf_dev

然后，在项目根目录下运行以下命令启动 shelf_dev：

shelf_dev

更多关于Flutter开发辅助插件shelf_dev的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼•2 天前

更多关于Flutter开发辅助插件shelf_dev的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter开发中，shelf_dev 是一个用于开发时提供便利功能的 Dart 包，通常与 Shelf 服务器一起使用。Shelf 是一个 Dart HTTP 服务器框架，而 shelf_dev 提供了一些开发工具，比如静态文件服务、热重载等，可以极大地提升开发效率。

以下是一个使用 shelf_dev 的基本示例，展示如何设置一个简单的 Shelf 服务器，并利用 shelf_dev 提供的一些开发辅助功能。

首先，确保你的 pubspec.yaml 文件中包含必要的依赖项：

dependencies:
  shelf: ^1.0.0
dev_dependencies:
  shelf_dev: ^1.0.0

然后，运行 flutter pub get 来安装这些依赖项。

接下来，在你的 Dart 项目中创建一个服务器文件，例如 bin/server.dart，并添加以下代码：

import 'dart:io';
import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';
import 'package:shelf_dev/shelf_dev.dart'; // 引入 shelf_dev

void main() async {
  // 创建一个路由器
  final router = Router();

  // 定义一个简单的路由
  router.get('/', (Request request) {
    return Response.ok('Hello, Shelf with shelf_dev!');
  });

  // 使用 shelf_dev 的 serve 函数来启动服务器
  // 这里启用了热重载和热重启功能
  await serve(router.handler, 'localhost', 8080,
      // 可以通过传递一个或多个 Middleware 来启用开发辅助功能
      middleware: [
        // 启用日志记录中间件
        logRequests(),
        // 启用静态文件服务中间件，假设静态文件位于 'web' 目录
        serveStatic('web', listDirectories: true),
      ]);
}

在这个示例中，我们做了以下几件事：

引入 shelf 和 shelf_dev 包。
创建一个 Router 实例并定义了一个简单的 GET 请求路由。
使用 shelf_dev 的 serve 函数来启动服务器，并传递了一个包含日志记录和静态文件服务中间件的列表。

确保你有一个 web 目录，并在其中放置一些静态文件（如 HTML、CSS、JavaScript 文件），以便测试静态文件服务。

现在，你可以运行你的 Dart 服务器：

dart bin/server.dart

服务器启动后，你可以访问 http://localhost:8080/ 来看到你定义的简单响应，访问 http://localhost:8080/web/ 来查看 web 目录下的静态文件。同时，由于我们启用了日志记录中间件，每次请求都会在控制台上输出日志信息。

shelf_dev 还提供了其他有用的中间件和开发工具，你可以根据需求查阅其文档以了解更多信息。这个示例展示了如何快速搭建一个带有开发辅助功能的 Shelf 服务器，希望对你有帮助。

Flutter开发辅助插件shelf_dev的使用