为每个Angular项目生成大量的文件

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

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

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

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

当前回答

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

2016-08-02 19:01:14

其他回答

没什么问题。这些都是您在package.json中提到的所有节点依赖项。

如果你已经下载了一些git hub项目，请小心，它可能有很多其他的依赖关系，而这些依赖关系实际上并不是angular 2 first hello world app所需要的:)

确保你有角度依赖 -rxjs 狼吞虎咽地吃打印稿 -tslint 码头工人

2016-10-20 17:18:02

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.

2019-08-22 02:12:04

您的开发配置没有问题。

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

ng new name --minimal

2021-03-23 18:38:23

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

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

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

2018-02-05 17:19:07

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

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

2016-08-02 15:20:24

为每个Angular项目生成大量的文件

推荐文章

最新文章

标签