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

Question

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

Mos*_*ham 573 javascript angular

我想为Angular开始一个简单的hello world应用程序.

当我按照官方快速入门中的说明进行操作时,安装程序在我的项目中创建了32,000个文件.

我认为这是一些错误或者我错过了什么,所以我决定使用angular-cli,但在设置项目后我计算了41,000个文件.

我哪里做错了？我错过了一些非常明显的东西吗？

Answer 1

Bhu*_*kar 351

您的配置没有任何问题.

Angular(从2.0版开始)使用npm模块和依赖项进行开发.这是你看到如此大量文件的唯一原因.

Angular的基本设置包含转换器,类型依赖关系,它们仅对于开发目的是必不可少的.

完成开发后,您需要做的就是捆绑此应用程序.

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

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

关于所有参与者,我不确定语义论证是否与OP的问题真正相关^^ (75认同)
"transpiler"只是一个编译器. (63认同)
@HunterMcMillen字节代码和/或机器代码是另一种语言.术语"transpiler"没有"编译器"的附加含义. (31认同)
但编译成另一种语言而不是字节代码或机器代码 (29认同)
它通常还会为依赖项及其依赖项等提供测试数据和测试以及构建工具. (7认同)
编译器是一个程序,它在A中获取代码,产生时间T,并在最终B中转换T.B通常是真实CPU的二进制代码,但也可以是另一种编程语言.编译器不需要生成字节代码. (5认同)
@Navin这不是什么依赖地狱意味着什么; 检查定义.npm是少数几个不会因设计而受到依赖地狱影响的软件包经理之一. (4认同)
欢迎来到J̶a̶v̶a̶S̶c̶r̶i̶p̶t̶依赖地狱.一旦你开始更新组件,它就会启动:) (3认同)
@DanPantry如果我们在评论部分没有偏离主题的语义参数,我不确定我是否会记得我就是这样! (3认同)
如果我正确地阅读答案,这是否意味着Angular 2在外部模块上有40k(!!)依赖(包括传递)？或者你可以扩展*Angular 2之间的链接使用npm模块和依赖项进行开发*和这样一个不切实际的文件数量？ (2认同)
正如 Tei 解释的那样，@strizzwald 编译器是一个将源语言翻译成目标语言的程序。目标语言也是人类可读的这一事实并不意味着编译器是一个编译器。但是，您可以使用 _transpiler_ 作为“源到源”编译器的同义词；在提交评论时，我并不是要暗示这个词有问题。:) (2认同)

Answer 2

Ank*_*ngh 140

                                Typical Angular2 Project

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

*: bundled with @angular

[ 看捆绑过程this ]

我猜**`-3`**是因为没有做总和,但现在我有:) (23认同)

Answer 3

hur*_*ane 50

您的开发配置没有任何问题.

出错了生产配置.

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

将这些文件组合在一起有很多选项:

YUI压缩机
谷歌闭包编译器
对于服务器端(我认为这是最好的)GULP

我同意你的意见,但OP似乎有一个XY问题 (4认同)
您不应该(需要引用)在服务器上将文件连接在一起.最多,我会使用一个转换器. (2认同)
@DanPantry我同意你的看法.但在评论提问者说"因为我的部署(谷歌应用程序引擎)只允许10K文件".在这些情况下,我们需要缩小文件计数. (2认同)

Answer 4

swa*_*ter 30

正如几位人士已经提到的:node_modules目录中的所有文件(包的NPM位置)都是项目依赖项的一部分(所谓的直接依赖项).除此之外,您的依赖项还可以拥有自己的依赖项等等(所谓的传递依赖项).几万个文件没什么特别的.

因为你只能上传10'000个文件(见评论),所以我会选择捆绑引擎.该引擎将捆绑您的所有JavaScript,CSS,HTML等,并创建一个捆绑包(如果您指定它们,则创建更多捆绑包).您的index.html将加载此捆绑包,就是这样.

我是webpack的粉丝,所以我的webpack解决方案将创建一个应用程序包和一个供应商包(对于完整的工作应用程序,请参见https://github.com/swaechter/project-collection/tree/master/web-angular2-例子):

的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>

Run Code Online (Sandbox Code Playgroud)

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));
}

Run Code Online (Sandbox Code Playgroud)

好处:

完整的生产线(TS linting,compiling,minification等)
3个文件用于部署 - >只有几个Http请求

缺点:

更高的构建时间
不是Http 2项目的最佳解决方案(见免责声明)

免责声明:这是Http 1.*的一个很好的解决方案,因为它可以最大限度地减少每个Http请求的开销.您只有index.html和每个包的请求 - 但不是100 - 200个文件.目前,这是要走的路.

另一方面,Http 2试图最小化Http开销,因此它基于流协议.此流能够双向通信(客户端< - >服务器),并且可以实现更智能的资源加载(您只加载所需的文件).该流消除了大部分Http开销(Less Http往返).

但它与IPv6相同:人们将真正使用Http 2需要几年的时间

@mdentinho 是的，在更现代的版本中。但是在 2016 年 SystemJS 和 CLI 是要走的路（很高兴我们现在有了 webpack） (2认同)

Answer 5

Bro*_*cco 21

您需要确保只是部署Angular CLI生成的项目中的dist(可分发的简称)文件夹.这允许该工具获取源代码及其依赖项,并且只为您提供运行应用程序所需的内容.

话虽如此,Angular CLI在生成构建方面存在问题,通过`ng build --prod

昨天(2016年8月2日)发布了一个版本,它将构建机制从西兰花 + systemjs切换到成功处理生产构建的webpack.

基于以下步骤:

ng new test-project
ng build --prod

Run Code Online (Sandbox Code Playgroud)

我看到这里列出的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

Run Code Online (Sandbox Code Playgroud)

注意目前要安装angular cli的webpack版本,你必须运行...npm install angular-cli@webpack -g

Answer 6

Yak*_*ain 14

Angular本身有很多依赖项,CLI的beta版下载的文件数量是其四倍.

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

Answer 7

mag*_*guy 13

最近使用 angular cli 创建了一个新项目，并且 node_modules 文件夹是 270 mb，所以是的，这是正常的，但我确信大多数新开发人员对 angular 世界都有疑问并且是有效的。对于一个简单的新项目，将依赖项减少一点可能是有意义的；) 不知道所有包所依赖的内容可能有点令人不安，尤其是对于第一次尝试 cli 的新开发人员。此外，大多数基本教程都没有讨论部署设置以获取仅需要的导出文件。我什至不相信 angular 官方网站上提供的教程讨论如何部署简单的项目。