我想为Angular创建一个简单的hello world应用。
当我按照官方快速入门中的说明安装时，在我的项目中创建了32,000个文件。
我认为这是一个错误或我错过了一些东西，所以我决定使用angular-cli，但在设置项目后，我数了41,000个文件。
我哪里错了?我是不是忽略了一些非常非常明显的东西?
您的配置没有问题。
Angular(从2.0版开始)使用npm模块和依赖项进行开发。这就是你看到这么多文件的唯一原因。
Angular的基本设置包括编译器、类型依赖关系，这些仅用于开发目的。
一旦您完成了开发，您所需要做的就是捆绑这个应用程序。
在捆绑你的应用程序之后，只有一个bundle.js文件可以部署到你的服务器上。
'transpiler'只是一个编译器，感谢@omninonsense添加它。
您的开发配置没有问题。
您的生产配置有问题。
当你开发一个“Angular 2项目”或“任何基于JS的项目”时，你可以使用所有文件，可以尝试所有文件，可以导入所有文件。但如果你想为这个项目服务，你需要合并所有结构化文件，并摆脱无用的文件。
有很多选项可以将这些文件合并在一起:
YUI Compressor 闭包编译器 对于服务器端(我认为最好)GULP
Angular本身有很多依赖项，而CLI的beta版本下载的文件是其他版本的四倍。
这是如何创建一个简单的项目将更少的文件(“只有”10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/
正如一些人已经提到的:你的node_modules目录下的所有文件(包的NPM位置)都是你的项目依赖关系(所谓的直接依赖关系)的一部分。除此之外，你的依赖也可以有它们自己的依赖等等(所谓的传递依赖)。几万个文件没什么特别的。
因为你只允许上传10,000个文件(见评论)，我会使用捆绑引擎。这个引擎将捆绑你所有的JavaScript, CSS, HTML等，并创建一个单一的捆绑包(或更多，如果你指定)。你的index.html会加载这个包，就这样。
我是webpack的粉丝，所以我的webpack解决方案将创建一个应用程序包和一个供应商包(完整的工作应用程序请参阅这里https://github.com/swaechter/project-collection/tree/master/web-angular2-example):
index . html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Webcms</title>
</head>
<body>
<webcms-application>Applikation wird geladen, bitte warten...</webcms-application>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
webpack.config.js
var webpack = require("webpack");
var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
/*
* Configuration
*/
module.exports = {
devtool: 'source-map',
debug: true,
entry: {
'main': './app/main.ts'
},
// Bundle configuration
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
// Include configuration
resolve: {
extensions: ['', '.ts', '.js', '.css', '.html']
},
// Module configuration
module: {
preLoaders: [
// Lint all TypeScript files
{test: /\.ts$/, loader: 'tslint-loader'}
],
loaders: [
// Include all TypeScript files
{test: /\.ts$/, loader: 'ts-loader'},
// Include all HTML files
{test: /\.html$/, loader: 'raw-loader'},
// Include all CSS files
{test: /\.css$/, loader: 'raw-loader'},
]
},
// Plugin configuration
plugins: [
// Bundle all third party libraries
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
// Uglify all bundles
new UglifyJsPlugin({compress: {warnings: false}}),
],
// Linter configuration
tslint: {
emitErrors: false,
failOnHint: false
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
优点:
完整构建行(TS检测、编译、缩小等) 只有几个Http请求
缺点:
更长的构建时间 不是Http 2项目的最佳解决方案(见免责声明)
免责声明:这是Http 1的一个很好的解决方案。*，因为它最小化了每个Http请求的开销。你只对index.html和每个包有一个请求-但不是100 - 200个文件。目前，这是一条正确的道路。
另一方面，Http 2试图最小化Http开销，因此它基于流协议。该流能够双向通信(Client <——> Server)，因此可以实现更智能的资源加载(只加载所需的文件)。流消除了大量的Http开销(更少的Http往返)。
但这和IPv6一样:人们真正使用Http 2还需要几年的时间
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
*:与@angular捆绑
[参见此捆绑过程⇗]
你需要确保你只是从Angular CLI生成的项目中部署dist (distributable的缩写)文件夹。这允许该工具获取您的源代码及其依赖项，并只提供运行应用程序所需的内容。
也就是说，Angular CLI在通过' ng build——prod进行产品构建时存在/曾经存在一个问题
昨天(2016年8月2日)发布了一个版本，将构建机制从broccoli + systemjs切换到webpack，成功地处理了产品构建。
基于这些步骤:
ng new test-project
ng build --prod
我看到在这里列出的14个文件的dist文件夹大小为1.1 MB:
./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
注意:目前要安装webpack版本的angular cli，你必须运行…NPM安装angular-cli@webpack -g
这实际上并不是Angular特有的，几乎所有使用NodeJs / npm生态系统作为工具的项目都会发生这种情况。
这些项目在你的node_modules文件夹中，是你的直接依赖需要运行的传递依赖。
在节点生态系统中，模块通常很小，这意味着我们不需要自己开发东西，而是倾向于以模块的形式导入大部分我们需要的东西。这可以包括像著名的左垫函数这样的小东西，如果不是作为练习，为什么我们自己写呢?
所以有很多文件实际上是一件好事，这意味着一切都是模块化的，模块作者经常重用其他模块。这种模块化的便利性可能是节点生态系统发展如此迅速的主要原因之一。
原则上这应该不会引起任何问题，但似乎你遇到了谷歌应用程序引擎文件计数限制。在这种情况下，我建议不要上传node_modules到应用程序引擎。
相反，在本地构建应用程序，并上传到谷歌应用程序引擎只捆绑文件，但不构建在应用程序引擎本身。
没什么问题。这些都是您在package.json中提到的所有节点依赖项。
如果你已经下载了一些git hub项目，请小心，它可能有很多其他的依赖关系，而这些依赖关系实际上并不是angular 2 first hello world app所需要的:)
确保你有角度依赖 -rxjs 狼吞虎咽地吃 打印稿 -tslint 码头工人
似乎没有人提到此处描述的预先编译: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存储库中。
如果你使用的是angular cli的新版本，请使用ng build——prod
它将创建dist文件夹，其中有更少的文件和项目的速度将提高。
此外，为了在本地测试angular 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
为此使用隐藏文件夹还可以鼓励这样的理解，即这些是与构建相关的中间文件，不需要保存到修订控制中——或者直接在部署中使用。
Creating a new project with angular cli recently and the node_modules folder was 270 mb, so yes this is normal but I'm sure most new devs to the angular world question this and is valid. For a simple new project it would make sense to pare the dependencies down maybe a bit;) Not knowing what all the packages depend on can be a bit unnerving especially to new devs trying the cli out for the first time. Add to the fact most basic tutorials don't discuss the deployment settings to get the exported files only needed. I don't believe even the tutorial offered on the angular official website talks about how to deploy the simple project.
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >
