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

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

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

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


当前回答

                                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捆绑

[参见此捆绑过程⇗]

其他回答

正如一些人已经提到的:你的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还需要几年的时间

您的配置没有问题。

Angular(从2.0版开始)使用npm模块和依赖项进行开发。这就是你看到这么多文件的唯一原因。

Angular的基本设置包括编译器、类型依赖关系,这些仅用于开发目的。

一旦您完成了开发,您所需要做的就是捆绑这个应用程序。

在捆绑你的应用程序之后,只有一个bundle.js文件可以部署到你的服务器上。

'transpiler'只是一个编译器,感谢@omninonsense添加它。

您的开发配置没有问题。

您的生产配置有问题。

当你开发一个“Angular 2项目”或“任何基于JS的项目”时,你可以使用所有文件,可以尝试所有文件,可以导入所有文件。但如果你想为这个项目服务,你需要合并所有结构化文件,并摆脱无用的文件。

有很多选项可以将这些文件合并在一起:

YUI Compressor 闭包编译器 对于服务器端(我认为最好)GULP

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

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

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

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

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

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

Angular本身有很多依赖项,而CLI的beta版本下载的文件是其他版本的四倍。

这是如何创建一个简单的项目将更少的文件(“只有”10K文件) https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/