Große Anzahl von Dateien generiert, die für alle Winkel-Projekt

Wollte ich starten Sie eine einfache hello world app für Eckige.

Wenn ich den Anweisungen gefolgt, die in der offiziellen quickstart die installation erstellt auf 32.000 Dateien in meinem Projekt.

Ich dachte, das ist irgendein Fehler oder habe ich etwas verpasst, also beschloss ich,Winkel-cli, aber nach dem einrichten des Projekts zählte ich rund 41.000 Dateien.

Wo habe ich bloß falsch gemacht? Bin ich etwas fehlt wirklich wirklich offensichtlich?

Es ist normal, dass Projekte, die angetrieben von NPM.
da mein Einsatz (google app engine) ermöglicht nur 10K Dateien
Für alle sind neugierig auf die Anzahl der Stimmen, die auf diese Frage und Ihre Antworten, dies machte den HN auf der ersten Seite. news.ycombinator.com/item?id=12209028
Ich Wette, die Sie Begehen .DS_Store Dateien auf git als gut.
Ich denke, "Wenn" hello world "- app arbeitet, ist alles in Ordnung" ist keine gute Philosophie zu Folgen, vor allem für jemanden ist, zu lernen. Die OP ist genau richtig, zu Fragen, warum so viele Dateien erstellt wurden. Das Beispiel selbst Verweise nur 5 Dateien. Und ehrlich gesagt, jede Anwendung, die mehr Dateien, als es Buchstaben in der Ausgabe in Frage gestellt werden sollte.

InformationsquelleAutor Moshe Shaham | 2016-08-02

angular javascript

334

Es ist nichts falsch mit Ihrer Konfiguration.

Eckig (seit version 2.0) verwendet npm-Module und Abhängigkeiten für die Entwicklung. Das ist der einzige Grund, warum Sie werden sehen, eine so große Anzahl von Dateien.

Einem basic-setup-des Winkel-enthält transpiler, Testungen, welche Abhängigkeiten sind wesentlichen nur für Entwicklungszwecke.

Sobald Sie fertig sind mit der Entwicklung, alles, was Sie tun müssen, ist die Bündelung dieser Anwendung.

Nachdem die Bündelung der Anwendung, es wird nur einen bundle.js Datei, die Sie anschließend auf Ihrem server.

'transpiler' ist nur ein compiler, danke @omninonsense für das hinzufügen, dass.

Es bringt in der Regel auch die Testdaten und tests sowie build-Werkzeuge für Abhängigkeiten und deren Abhängigkeiten und so weiter.
Ein "transpiler" ist nur ein compiler.
die Kompilierung ist jedoch auf eine andere Sprache anstelle von Bytecode oder Maschinencode
Byte-code und/oder Maschinen-code ist eine andere Sprache. Der Begriff "transpiler" hat keine weitere Bedeutung als "compiler".
Mit Respekt an alle beteiligten, ich bin nicht sicher, dass die Semantik-argument ist wirklich relevant für OP ' s Frage ^^

InformationsquelleAutor Bhushan Gadekar

135

                                Typical Angular2 Project

NPM Package - Dateien (Entwicklung) Real World-Dateien (Deployment)

@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

[ sehen diese für die Bündelung von Prozess - ⇗ ]

Ich denke, -3 gegeben wurden, für nicht tun, die Summe, die ich aber jetzt habe 🙂
was meinst du mit real-world-Dateien?
world-Dateien" ist die Anzahl der Dateien, wenn das Projekt bereitgestellt oder nicht in Produktion.

InformationsquelleAutor Ankit Singh

49

Es ist nichts falsch mit Ihrem Entwicklung Konfiguration.

Etwas falsch mit Ihrem Produktion Konfiguration.

Wenn Sie entwickeln eine "Winkel-2-Projekt" oder "Jedes Projekt basiert auf JS" können Sie alle Dateien, können Sie versuchen, alle Dateien, die Sie importieren können Sie alle Dateien. Aber wenn Sie wollen, um zu dienen dieses Projekt müssen Sie KOMBINIEREN alle Dateien strukturiert und loswerden von nutzlosen Dateien.

Gibt es eine Menge von Optionen für kombinieren Sie diese Dateien zusammen:
- YUI Compressor
- Google Closure Compiler
- Für die server-Seite (ich denke es ist das beste) GULP
Sollten Sie nicht (citation needed) werden verketten von Dateien auf dem server. Bei den meisten, die ich benutzen würde ein transpiler.
Transpilers source-to-source Compiler. Ich denke, Sie kann sich nur ändern "X" auf "JS". Datei zählt sind die gleichen.
..Ja, aber ich bin mir nicht sicher Ihren Punkt. Mein Punkt ist, dass Sie wahrscheinlich sollte nicht versuchen, Sie zu verkleinern-server-code (durch verketten von Dateien und somit die Dateigröße reduzieren). Bei den meisten, die Sie verwenden sollten, Babel mit Ihrem code, wenn Sie mit Blutungen features wie async/await.
Ich bin mit Ihnen einverstanden. Aber auf die Kommentare der Fragesteller sagt "weil mein deployment (google app engine) ermöglicht nur 10K Dateien". In diesen Bedingungen, wir brauchen, um zu verkleinern-Datei zählt.
Ich würde mit Ihnen einverstanden, aber OP scheint ein XY-Problem hier

InformationsquelleAutor hurricane

Mehreren Leuten bereits erwähnt: Alle Dateien im Ordner node_modules-Verzeichnis (NPM Speicherort für Pakete) sind Teil des Projekts Abhängigkeiten (So genannte direkte Abhängigkeiten). Als Ergänzung zu, dass Ihre Abhängigkeiten können auch Ihre eigenen Abhängigkeiten und so weiter usw. (Sogenannte transitive Abhängigkeiten). Mehrere zehntausend Dateien sind nichts besonderes.

Weil Sie nur hochladen dürfen 10'000 Dateien (Siehe Kommentare), würde ich mit einem bundler-Motor. Dieser Motor wird bündeln Sie alle Ihre JavaScript, CSS, HTML etc. und erstellen Sie eine single-bundle (oder mehr, wenn Sie Sie angeben). Ihre index.html laden dieses bundle und das ist es.

Ich bin ein fan von webpack, also mein webpack-Lösung erstellen Sie eine Anwendungs-bundle und einem Lieferanten bundle (Für die volle Funktion der Anwendung finden Sie hier 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));
}

Vorteile:

Vollständigen build-Linie (TS-linting, kompilieren, Verkleinerung usw.)
3 Dateien für die Bereitstellung --> Nur ein paar Http-request

Nachteile:

Höher bauen Zeit
Nicht die beste Lösung fot Http-2-Projekte (Siehe disclaimer)

Haftungsausschluss: Dies ist eine gute Lösung für Http 1.*, denn es minimiert den Aufwand für jeden Http-Anfrage. Sie haben nur eine Anfrage für Ihre index.html und jeder bundle - aber nicht für 100 - 200 Dateien. Im moment ist dies der Weg zu gehen.

Http 2 auf der anderen Seite versucht die Minimierung der Http-overhead, so basiert es auf einem stream-Protokoll. Dieser stream ist in der Lage zu kommunizieren in beide Richtungen (Client <--> Server) und als Grund dafür, dass mehr intelligente laden von Ressourcen ist möglich (nur laden Sie die gewünschten Dateien). Der stream entfällt ein großer Teil der Http-overhead (Weniger Http-Roundtrips).

Aber es ist das gleiche wie mit IPv6: Es wird ein paar Jahre dauern, bis die Leute auch wirklich benutzen Http 2

Nicht notwendig, aber, da der OP erwähnte mit angular-cli die bereits ein bundler (das gleiche vorgeschlagen webpack).
Ja, in moderneren Versionen. Aber im Jahr 2016 SystemJS und CLI war der Weg zu gehen (Gerne haben wir webpack jetzt)

InformationsquelleAutor swaechter

21

Müssen Sie sicherstellen, dass Sie nur der Bereitstellung der dist (kurz für verteilbare) Ordner aus dem Projekt generiert, indem die Winkel-CLI. Dies ermöglicht das tool nehmen Ihre source-code und die Abhängigkeiten und nur das liefern, was Sie benötigen, um Ihre Anwendung auszuführen.

Dass gesagt wird, es ist/war ein Problem mit den Eckigen CLI in Bezug auf die Produktion baut über `ng build --prod

Gestern (2. August 2016) eine Version fertig war, die Umstellung der build-Mechanismus von Brokkoli + systemjs zu webpack, die erfolgreich behandelt-Produktion baut.

Basierend auf diesen Schritten:
```
ng new test-project
ng build --prod
```
Sehe ich eine dist Ordner Größe 1.1 MB über die 14 Dateien hier aufgelistet:
```
./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
```
Hinweis Derzeit installieren die webpack-version des kantigen cli, müssen Sie ausführen... npm install angular-cli@webpack -g

InformationsquelleAutor Brocco
14

Winkel selbst hat viele Abhängigkeiten, und die beta-version des CLI-downloads, vier mal mehr Dateien.

Dies ist, wie ein einfaches Projekt erstellen, werden weniger Dateien ("nur" 10K Dateien)
https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

InformationsquelleAutor Yakov Fain
12

Scheint, wie niemand erwähnt habe, Ahead-of-Time Compilation, wie hier beschrieben: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Meine Erfahrung mit Angular so weit ist, dass AoT-schafft das kleinste baut mit fast keine Ladezeit. Und die meisten wichtiger als die Frage hier ist, Sie brauchen nur zu Schiff ein paar Dateien für die Produktion.

Scheint dies zu sein, weil die Winkel-compiler wird nicht ausgeliefert, die mit der Produktion baut die templates kompiliert werden, "Vor der Zeit". Es ist auch sehr cool zu sehen, dass Ihr HTML-template-markup transformiert, um javascript-Anweisungen, die wäre sehr schwer zu reverse Engineering in die ursprüngliche HTML.

Ich habe ein einfaches video wo ich zeigen die download-Größe, Anzahl der Dateien etc.. für eine Angular-app in dev vs AoT bauen - die Sie hier sehen können:

https://youtu.be/ZoZDCgQwnmQ

Finden Sie die Quelle code für die demo hier:

https://github.com/fintechneo/angular2-templates

Und - wie all die anderen hier gesagt - es ist nichts falsch, wenn es viele Dateien in der Entwicklungsumgebung. Das ist, wie es ist, mit all den Abhängigkeiten, die kommt mit Winkel -, und vielen anderen modernen frameworks. Aber der Unterschied hier ist, dass beim Versand an die Produktion Sie sollten in der Lage sein, pack es in ein paar Dateien. Auch Sie wollen nicht alle von dieser Abhängigkeit-Dateien im git-repository.

InformationsquelleAutor Peter Salomonsen
8

Dies ist eigentlich nicht Eckig bestimmten, passiert es bei fast jedem Projekt verwendet die NodeJs /npm-ökosystem für seine Werkzeuge.

Diese Projekt in das node_modules-Ordner, und sind die transititve Abhängigkeiten, die Ihre direkten Abhängigkeiten ausgeführt werden müssen.

In der Knoten-ecosystem-Module sind in der Regel kleiner, was bedeutet, dass statt der Entwicklung die Dinge selbst, neigen wir dazu, zu importieren, was wir benötigen, unter der form eines Moduls. Dazu gehören so kleine Dinge wie die berühmten Links-pad-Funktion, warum schreiben Sie es uns, wenn nicht als eine übung ?

So dass eine Menge von Dateien, die eigentlich eine gute Sache, es bedeutet, alles ist sehr modular und Modul-Autoren Häufig wiederverwendet anderen Modulen. Diese einfache Modularität ist wohl einer der wichtigsten Gründe, warum der Knoten ökosystem wuchs so schnell.

Im Prinzip sollte dies nicht zu Problemen führen, aber es scheint, Sie laufen in eine google app engine-file-count limit. In das ich Falle, schlage ich nicht hochladen node_modules app engine.

stattdessen erstellen Sie die Anwendung lokal und hochladen auf die google app engine nur die gebündelte filesn aber nicht, um die build-in-app-engine selbst.

InformationsquelleAutor Angular University
7

Wenn Sie Winkel-cli die neuere version verwenden ng build --prod

Wird es schaffen dist Ordner mit weniger Dateien und der Geschwindigkeit des Projekts wird erhöht.

Auch für Tests in lokalen mit die beste Leistung von Winkel-cli können Sie ng serve --prod

InformationsquelleAutor Jalay Oza
5

wenn Sie Winkel-CLI können Sie immer verwenden-minimal-flag, wenn Sie ein Projekt erstellen
```
ng new name --minimal
```
Habe ich einfach laufen Sie mit der fahne und schafft es 24 600 Dateien und ng build --prod produziert 212 KB dist Ordner

Also, wenn Sie nicht brauchen, Wasser-Fontänen, die in Ihrem Projekt oder wollen einfach nur schnell zu testen, etwas aus ich denke, dies ist ziemlich nützlich

InformationsquelleAutor SebOlens
4

Hier ist ein Vergleich, was mehr Platz im Winkel-Projekte.

InformationsquelleAutor Jagadesha NH
3

Wenn Ihr Dateisystem symbolische links unterstützt, dann kann man wenigstens absteigen alle diese Dateien in einem versteckten Ordner, so dass ein intelligentes Werkzeug, wie tree wird nicht angezeigt, standardmäßig.
```
mv node_modules .blergyblerp && ln -s .blergyblerp node_modules
```
Mithilfe einer versteckten Ordner können auch fördern das Verständnis, dass diese build-related intermediate-Dateien, die nicht gespeichert werden müssen, um die Versionskontrolle -- oder direkt in Ihrer Bereitstellung.

InformationsquelleAutor nobar
2

Es ist nichts falsch. Dies sind alle Knoten von Abhängigkeiten, die Sie erwähnt haben, in das Paket.json.

Nur vorsichtig sein, wenn Sie download einige git-hub Projekt, es kann auch viele andere Abhängigkeiten, die nicht wirklich benötigen für eckige 2 erste app "hello world":)
- stellen Sie sicher, Sie haben Winkel-Abhängigkeiten
  -rxjs
  -Schluck
  -Typoskript
  -tslint
  -docker
InformationsquelleAutor piyush anwekar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.