我想为Angular创建一个简单的hello world应用。

当我按照官方快速入门中的说明安装时,在我的项目中创建了32,000个文件。

我认为这是一个错误或我错过了一些东西,所以我决定使用angular-cli,但在设置项目后,我数了41,000个文件。

我哪里错了?我是不是忽略了一些非常非常明显的东西?


当前回答

这实际上并不是Angular特有的,几乎所有使用NodeJs / npm生态系统作为工具的项目都会发生这种情况。

这些项目在你的node_modules文件夹中,是你的直接依赖需要运行的传递依赖。

在节点生态系统中,模块通常很小,这意味着我们不需要自己开发东西,而是倾向于以模块的形式导入大部分我们需要的东西。这可以包括像著名的左垫函数这样的小东西,如果不是作为练习,为什么我们自己写呢?

所以有很多文件实际上是一件好事,这意味着一切都是模块化的,模块作者经常重用其他模块。这种模块化的便利性可能是节点生态系统发展如此迅速的主要原因之一。

原则上这应该不会引起任何问题,但似乎你遇到了谷歌应用程序引擎文件计数限制。在这种情况下,我建议不要上传node_modules到应用程序引擎。

相反,在本地构建应用程序,并上传到谷歌应用程序引擎只捆绑文件,但不构建在应用程序引擎本身。

其他回答

如果你使用Angular CLI,你可以在创建项目时使用——minimal标志

ng new name --minimal

我刚刚用标志运行它,它创建了24 600个文件和ng build -prod生成212 KB的dist文件夹

所以如果你的项目中不需要饮水机或者只是想快速测试一些东西,我认为这是非常有用的

您的开发配置没有问题。

如果你使用Angular CLI,你可以在创建项目时使用——minimal标志

ng new name --minimal

如果你使用的是angular cli的新版本,请使用ng build——prod

它将创建dist文件夹,其中有更少的文件和项目的速度将提高。

此外,为了在本地测试angular cli的最佳性能,你可以使用ng serve——prod

如果您的文件系统支持符号链接,那么您至少可以将所有这些文件降级到一个隐藏文件夹中——这样像tree这样的智能工具在默认情况下就不会显示它们。

mv node_modules .blergyblerp && ln -s .blergyblerp node_modules

为此使用隐藏文件夹还可以鼓励这样的理解,即这些是与构建相关的中间文件,不需要保存到修订控制中——或者直接在部署中使用。

似乎没有人提到此处描述的预先编译:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止,我使用Angular的经验是,AoT创建了最小的构建,几乎没有加载时间。最重要的是,您只需要将几个文件交付到生产环境中。

这似乎是因为Angular编译器不会随产品版本一起发布,因为模板是“提前”编译的。看到你的HTML模板标记转换成javascript指令也很酷,这将很难反向工程到原始HTML。

我做了一个简单的视频,演示了Angular应用在开发阶段和AoT构建阶段的下载大小、文件数量等——你可以在这里看到:

https://youtu.be/ZoZDCgQwnmQ

你可以在这里找到演示的源代码:

https://github.com/fintechneo/angular2-templates

而且——正如这里所有其他人所说的那样——当开发环境中有许多文件时,这并没有什么问题。这就是Angular和许多其他现代框架所附带的所有依赖项的情况。但不同之处在于,当交付到生产环境时,您应该能够将其打包到几个文件中。你也不希望所有这些依赖文件都在你的git存储库中。