Flutter项目模板插件project_template的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter项目模板插件project_template的使用

项目概述

project_template 是一个用于生成项目模板和文件树的工具,支持任何编程语言或框架。该插件提供了命令行接口(CLI)和 Dart 库两种使用方式。

版本信息

  • pub package
  • Null Safety
  • Codecov
  • Dart CI
  • GitHub Tag
  • New Commits
  • Last Commits
  • Pull Requests
  • Code size
  • License

模板格式

定义模板时,只需声明一个文件树,其中变量的格式为 ___VAR_NAME___。变量将在文件路径和文件内容中被检测到。

示例模板文件树

___project_name_dir___/.gitignore
___project_name_dir___/bin/___project_name_dir___.dart
___project_name_dir___/CHANGELOG.md
___project_name_dir___/project_template.yaml
___project_name_dir___/pubspec.yaml
___project_name_dir___/README.md

示例 README.md 内容

project_name

project_description

Usage

CLI:

$> ___project_name_dir___ -h

See Also

  • homepage

## 项目清单

可以在 `project_template.yaml` 文件中声明项目清单:

```yaml
project_name:
  description: The name of the project.
  example: Simple App

project_name_dir:
  description: The project directory name.
  example: simple_app

project_description:
  description: The project description for `pubspec.yaml`.
  example: A simple project.
  default: A project from template.
  • 具有 default 值的变量在使用 CLI 命令 create 时不是必需的。

使用方法

project_template 可以作为命令行接口(CLI)或 Dart 库使用。

CLI 使用

安装

全局激活 CLI:

$> dart pub global activate project_template

现在可以直接使用 CLI:

$> project_template --help

CLI 命令

prepare

准备一个模板目录并将其保存为单个文件。生成的文件将用于 create 命令。

准备为 JSON 文件:

$> project_template prepare -d example/template-example -r ".DS_Store$" -o /tmp/template-x.json

准备为 Zip 文件:

$> project_template prepare -d example/template-example -r ".DS_Store$" -o /tmp/template-x.zip

参数说明:

  • -d: 模板目录/源
    • 目录: path/to/template-directory
    • Zip 文件: path/to/template-x.zip
    • Tar+gZip 文件: path/to/template-x.tar.gz
    • Tar 文件: path/to/template-x.tar
  • -r: 要忽略的文件路径的正则表达式
  • -o: 准备好的模板输出文件(用于 create 命令)
    • Zip 文件: path/to/template-x.zip
    • Tar+gZip 文件: path/to/template-x.tar.gz
    • Tar 文件: path/to/template-x.tar
    • JSON 文件: path/to/template-x.json
    • YAML 文件: path/to/template-x.yaml
info

显示模板的信息(文件、变量和清单):

$> project_template info -t /tmp/template-x.zip

参数说明:

  • -t: 模板路径
    • 目录: path/to/template-directory
    • Zip 文件: path/to/template-x.zip
    • Tar+gZip 文件: path/to/template-x.tar.gz
    • Tar 文件: path/to/template-x.tar
    • JSON 文件: path/to/template-x.json
    • YAML 文件: path/to/template-x.yaml
create

从模板创建/构建文件树:

$> project_template create -t /tmp/template-x.zip -p project_name_dir=foo -p project_name=Foo -p "project_description=Foo project." -p homepage=http://foo.com -o /tmp/project-x

参数说明:

  • -t: 模板路径
    • 目录: path/to/template-directory
    • Zip 文件: path/to/template-x.zip
    • Tar+gZip 文件: path/to/template-x.tar.gz
    • Tar 文件: path/to/template-x.tar
    • JSON 文件: path/to/template-x.json
    • YAML 文件: path/to/template-x.yaml
  • -p: 模板属性/变量定义
  • -o: 输出目录/zip/tar.gz(生成的项目文件树将保存在这里)
    • 目录: path/to/template-directory
    • Zip 文件: path/to/template-x.zip
    • Tar+gZip 文件: path/to/template-x.tar.gz
    • Tar 文件: path/to/template-x.tar

库使用

以下是一个简单的示例,从目录加载模板,解析并构建它(使用变量定义),然后将其保存到新目录。

import 'dart:io';
import 'package:project_template/src/project_template_storage_io.dart';
import 'package:yaml_writer/yaml_writer.dart';

void main() async {
  var currentDir = Directory.current.absolute;

  var exampleDir = currentDir.path.endsWith('example')
      ? currentDir
      : Directory('${currentDir.path}/example');

  assert(
      exampleDir.existsSync(), "Can't resolve example directory: $exampleDir");

  var templateDir = 'template-example';

  var storage = StorageIO.directory(exampleDir, templateDir)
    ..ignoreFiles.add('.DS_Store');

  print(storage);

  print('----------------------------------------------------');

  var files = storage.listFiles();

  for (var file in files) {
    print('- $file \t-> ${file.directoryAbsolute}');
  }

  print('----------------------------------------------------');

  var template = await storage.loadTemplate();

  var templateVariables = template.parseTemplateVariables();

  print('Variables:\n  $templateVariables\n');

  var manifest = template.getManifest();

  print('Manifest:\n');

  print(
    YamlWriter()
        .write(manifest)
        .split(RegExp(r'[\r\n]'))
        .map((l) => '  $l')
        .join('\n'),
  );

  print('----------------------------------------------------');

  print(template.toYAMLEncoded());

  print('----------------------------------------------------');

  var variables = {
    'project_name': 'Console Simple',
    'project_name_dir': 'console_simple',
    'homepage': 'https://console-simple.domain',
  };

  var templateResolved = template.resolve(variables);

  print(templateResolved.toYAMLEncoded());

  // Save `templateResolved` to `example/template-generated`:
  // var storageSave = StorageIO.directory(exampleDir);
  // templateResolved.saveTo(storageSave, 'template-generated');
}

CLI 库使用

CLI 类基于 args 包中的 CommandCommandRunner,可以集成到其他项目和其他 CLI 工具中。

以下是一个使用 project_template_clitool-x 示例:

import 'dart:io';
import 'package:args/command_runner.dart';
import 'package:project_template/project_template_cli.dart';

void _consolePrinter(Object? o) {
  print(o);
}

const String cliTitle = '[Tool-X/${Template.version}]';

void main(List<String> args) async {
  var commandRunner =
      CommandRunner<bool>('tool-x', '$cliTitle - CLI Tool')
        ..addCommand(CommandInfo(cliTitle, _consolePrinter))
        ..addCommand(CommandCreate(cliTitle, _consolePrinter))
        ..addCommand(CommandPrepare(cliTitle, _consolePrinter));

  var ok = await commandRunner.run(args);

  exit(ok ? 0 : 1);
}

功能和问题

请在 issue tracker 中提交功能请求和 bug 报告。

作者

Graciliano M. Passos: gmpassos@GitHub

许可证

Apache License - Version 2.0


更多关于Flutter项目模板插件project_template的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter项目模板插件project_template的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中,使用project_template插件可以帮助你快速生成一个带有预设结构和配置的新项目。尽管project_template不是Flutter官方插件,但假设它是一个自定义或第三方插件,我们可以通过创建一个自定义模板并在新项目中应用这个模板来模拟其功能。

以下是一个简化的例子,展示如何在Flutter项目中模拟使用project_template插件的功能。这个例子将包括一个自定义模板目录和一些脚本来复制这些模板文件到新的Flutter项目中。

1. 创建模板目录

首先,创建一个模板目录,其中包含你希望在新项目中自动生成的文件和目录结构。例如:

/templates
  /lib
    main.dart.template
  /android
    /app
      build.gradle.template
  /ios
    Runner
      Info.plist.template
  pubspec.yaml.template

在这些模板文件中,你可以包含占位符,这些占位符稍后可以被替换为实际的项目名称或其他配置。

2. 编写脚本复制模板

接下来,编写一个脚本(例如使用Dart或Shell脚本)来复制这些模板文件到一个新的Flutter项目中,并替换占位符。以下是一个简单的Dart脚本示例:

import 'dart:io';

void main(List<String> arguments) {
  if (arguments.length != 2) {
    print('Usage: dart create_project.dart <project_name> <template_dir>');
    exit(1);
  }

  String projectName = arguments[0];
  String templateDir = arguments[1];

  Directory projectDir = Directory(projectName);
  if (projectDir.existsSync()) {
    print('Project directory already exists.');
    exit(1);
  }

  projectDir.createSync(recursive: true);

  void copyAndReplace(String sourceFile, String destFile) {
    File sourceFileObj = File('$templateDir/$sourceFile');
    String content = sourceFileObj.readAsStringSync();
    content = content.replaceAll('{{projectName}}', projectName);
    File destFileObj = File('$projectDir/$destFile');
    destFileObj.writeAsStringSync(content);
  }

  // Example of copying and replacing templates
  copyAndReplace('lib/main.dart.template', 'lib/main.dart');
  copyAndReplace('android/app/build.gradle.template', 'android/app/build.gradle');
  copyAndReplace('ios/Runner/Info.plist.template', 'ios/Runner/Info.plist');
  copyAndReplace('pubspec.yaml.template', 'pubspec.yaml');

  print('Project created successfully.');
}

3. 使用脚本创建新项目

现在,你可以使用上述Dart脚本来创建一个新的Flutter项目。例如,在命令行中运行:

dart create_project.dart MyNewProject /path/to/templates

这将创建一个名为MyNewProject的新目录,并将模板文件复制到该目录中,同时替换占位符{{projectName}}MyNewProject

4. 自定义模板内容

在模板文件中,你可以根据需要添加更多占位符或预设配置。例如,在main.dart.template中:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String title;

  MyApp(this.title);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

在这个例子中,{{projectName}}将被替换为实际的项目名称。

通过上述步骤,你可以模拟使用project_template插件的功能来快速生成带有预设结构和配置的新Flutter项目。当然,这只是一个简化的示例,实际应用中可能需要更复杂的模板和脚本逻辑。

回到顶部