我想为Angular启动一个简单的hello world应用程序。
当我按照官方快速入门中的说明进行安装时,安装程序在我的项目中创建了32,000个文件。
我认为这是一个错误,或者我错过了一些东西,所以我决定使用angular-cli,但是在设置项目后,我计算了41,000个文件。
我哪里做错了?我是否错过了确实很明显的东西?
我想为Angular启动一个简单的hello world应用程序。
当我按照官方快速入门中的说明进行安装时,安装程序在我的项目中创建了32,000个文件。
我认为这是一个错误,或者我错过了一些东西,所以我决定使用angular-cli,但是在设置项目后,我计算了41,000个文件。
我哪里做错了?我是否错过了确实很明显的东西?
没有任何错误。这些都是您在package.json中提到的所有节点依赖项。
请注意,如果您下载了一些git hub项目,它可能还有很多其他依赖,而Angular 2 first hello world应用实际上并不需要这些依赖:)
如果您正在使用angular cli的较新版本,请使用 ng build --prod
它将创建一个dist文件夹,该文件夹具有较少的文件,并且项目速度会提高。
也可以在本地使用最佳角度cli性能进行测试 ng serve --prod
如果使用Angular CLI,则在创建项目时始终可以使用--minimal标志
ng new name --minimal
我刚刚用标志运行它,它创建了24 600个文件并ng build --prod
生成212 KB dist文件夹
因此,如果您在项目中不需要喷泉,或者只是想快速测试一下,我认为这很有用
如果您的文件系统支持符号链接,那么您至少可以将所有这些文件释放到一个隐藏的文件夹中-这样,tree
默认情况下,像这样的智能工具就不会显示它们。
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
为此使用隐藏文件夹也可能会促使您理解这些是与构建相关的中间文件,不需要保存到版本控制中或直接在部署中使用。
这实际上不是特定于Angular的,它几乎发生在所有使用NodeJs / npm生态系统作为其工具的项目中。
这些项目位于node_modules文件夹内,并且是直接依赖项需要运行的transititve依赖项。
在节点中,生态系统模块通常很小,这意味着我们不自行开发东西,而是倾向于以模块的形式导入大部分所需信息。这可能包括诸如著名的左键盘功能之类的小东西,如果不作为练习,为什么还要自己编写呢?
因此拥有大量文件实际上是一件好事,这意味着一切都非常模块化,模块作者经常重用其他模块。这种模块化的简便性可能是节点生态系统如此快速增长的主要原因之一。
原则上,这应该不会造成任何问题,但似乎您遇到了Google App Engine文件数限制。在这种情况下,我建议不要将node_modules上传到应用引擎。
而是在本地构建应用程序,然后仅将捆绑的文件上传到google app引擎,而不上传到内置的app引擎本身。
Angular本身具有很多依赖性,Beta版的CLI下载的文件多四倍。
这是一个创建简单项目的方法,该文件将减少文件(“仅” 10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
您需要确保仅从Angular CLI生成的项目中部署dist(可分发的缩写)文件夹。这使该工具可以获取源代码及其依赖项,并且仅提供运行应用程序所需的内容。
话虽这么说,Angular CLI在通过ng build --prod进行生产构建方面存在问题
昨日(2016年8月2日)释放已完成其切换的构建机制,从西兰花 + systemjs到的WebPack成功地处理产品构建。
基于以下步骤:
ng new test-project
ng build --prod
我在这里列出的14个文件中看到1.1 MB的dist
文件夹大小:
./app/index.js
./app/size-check.component.css
./app/size-check.component.html
./favicon.ico
./index.html
./main.js
./system-config.js
./tsconfig.json
./vendor/es6-shim/es6-shim.js
./vendor/reflect-metadata/Reflect.js
./vendor/systemjs/dist/system.src.js
./vendor/zone.js/dist/zone.js
注意当前要安装角度cli的webpack版本,必须运行...npm install angular-cli@webpack -g
Typical Angular2 Project
NPM软件包 文件(开发) 实际文件(部署)
@angular 3,236 1
rxJS 1,349 1*
core-js 1,341 2
typings 1,488 0
gulp 1,218 0
gulp-typescript 1,243 0
lite-server 5,654 0
systemjs-builder 6,470 0
__________________________________________________________________
Total 21,999 3
*
: bundled with @angular
[ 有关捆绑过程,请参阅此内容⇗ ]
您的开发配置没有错。
您的生产配置有问题。
当您开发“ Angular 2项目”或“基于JS的任何项目”时,您可以使用所有文件,可以尝试所有文件,也可以导入所有文件。但是,如果您想为该项目提供服务,则需要合并所有结构化文件并清除无用的文件。
有很多选项可以将这些文件组合在一起: