Question

根据Package layout conventions，web文件夹应包含以下内容：

HTML，CSS，图片，甚至可能是一些JavaScript。所有这些都进入了你的包的web目录。您可以自由地将内容组织到您的内心。如果让你满意的话，对子目录发疯吧。

所以我的web目录看起来像这样：

web/data_access
web/model
web/ui
web/ui/navigation
etc.

现在，如何管理所有这些import语句。我得到了很多声明：

import '../../model/my_model.dart';
import '../../data_access/mock_dao.dart';
etc.

我不喜欢在我的导入中使用那么多../，因为这很脆弱，每当我更改文件夹结构中的任何内容时，我都会遇到问题。

是否有更好的方法在web文件夹中整理代码？

或

还有其他方法可以进行导入吗？

Answer 1

我将几乎所有应用程序的代码都放入lib中，以避免您遇到的问题。这甚至适用于Web组件。

从widget.dart中查看此组件：https://github.com/kevmoo/widget.dart/tree/master/lib/components

我通常只将app.dart放入web /，它只是从lib中提取库并初始化应用程序。

请参阅此应用示例，其中包含一个包含组件的pub包：https://github.com/sethladd/catpic-app

这就是我的HTML文件的样子。请注意在路径中包含包：

<!DOCTYPE html>
<html>
<head>
  <title>Your life is complete</title>
  <link rel="components" href="packages/catpic/components/cat_pic.html">
  <link rel="components" href="packages/frame/components/frame.html">
  <link rel="stylesheet" href="styles.css">
</head>

Answer 2

不幸的是，没有。有一个开放的feature request解决了这个问题，但实施这个可能需要一段时间。解决此问题的最佳方法是将多个类捆绑到一个文件中，或将多个文件捆绑到库中 - 有效地减少了导入语句的数量。我使用part of语句使我的整个应用程序成为一个大型库，因此我不必处理import语句。虽然这并没有消除潜在的问题，但它现在有效。

此外，在更改文件夹结构时重构而不是简单地重命名会更改受影响的import语句，从而消除了手动调整它们的痛苦。

可以将Web组件导入到库中，只需使用export语句重新导出，从而将它们捆绑到一个导入中。

如何在web文件夹中组织dart代码

2 个答案: