web-dev-qa-db-fra.com

Comment regrouper Angular2 RC1 avec systemjs

Avant la libération, les candidats avaient fourni un fichier groupé. Depuis la publication des candidats, il n'y a plus de fichier groupé. Incluant angular2 et rxjs, mon application effectue maintenant 671 demandes de chargement en 7 secondes. Cela a paralysé le développement.

Est-ce que quelqu'un sait comment regrouper angular et rxjs et les inclure dans system.config?

angularbundlerxjssystemjs
13
CurlyFro

Pour obtenir un projet plus léger, vous devez vérifier SystemJS Builder ou JSPM pour regrouper votre projet.

Exemple de projet de départ: https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia a donné une très belle information ici: https://stackoverflow.com/a/37098964/5706293

6
eko

Vous avez juste besoin d'utiliser un bundle:

  • Fichiers UMD: c'est probablement la solution la plus simple. Comme vous pouvez le voir dans cet exemple exemple . Il vous suffit de faire référence aux fichiers UMD dans votre fichier de configuration systemjs (ce qui n’est pas très utile pour les environnements de production): 

    System.config({
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        '@angular/core': {
            main: 'core.umd.js',
            defaultExtension: 'js'
        },
        '@angular/compiler': {
            main: 'compiler.umd.js',
            defaultExtension: 'js'
        },
        '@angular/common': {
            main: 'common.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'platform-browser-dynamic.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser': {
            main: 'platform-browser.umd.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});

    Vous pouvez trouver un autre exampe (probablement mieux) ici !

  • systemjs-builder + gulp: si vous voulez continuer à utiliser systemjs, c'est un bon choix d'utiliser cette solution. Cependant, je l'ai testée et il m'a fallu 30 ans pour générer le paquet, ce qui le rend moins utile pour le développement ( peut-être que je faisais quelque chose de mal [presque sûr]), mais vous pouvez toujours vérifier comment grouper votre application à l'aide de system-builder ici ;

  • webpack: J'utilise actuellement webpack. Webpack dispose d'un outil de développement appelé webpack-dev-server qui intègre virtuellement l'application dans la mémoire, ce qui accélère le processus pendant le développement (+ rechargement à chaud). Vous pouvez trouver un rapide tutoriel vidéo ici et une description plus détaillée dans Angular 2 documentation ici . Pour utiliser webpack, vous devez installer webpack (et webpack-dev-server si vous le souhaitez) packages: npm i -S webpack webpack-dev-server, créez un fichier webpack.config.js et exécutez-le en utilisant uniquement webpack file ou webpack-dev-server --inline pour créer un serveur qui ré-empiler automatiquement avec vos modifications. L'option --inline active le rechargement automatique dans la fenêtre du navigateur:

    // webpack.config.js file
module.exports = {
    entry: 'SRC_DIR/main.js',
    output: {
        path: 'BUILD_DIR',
        filename: 'bundle.js'
    }
}

    Maintenant, insérez votre fichier bundle.js sur votre index.html: <script src="BUILD_DIR/bundle.js"></script>

Ces deux dernières options vous permettront de générer un ensemble de l’application complète que vous pouvez inclure manuellement dans votre fichier index.html.

8
dygufa

1) con-cat tous les fichiers js et css inclure sur index.html en utilisant gulp-concat.

2) Regroupement de bibliothèques angulaires et de composants d’application mentionnés dans le fichier systemjs.config.js. Utiliser gulp systemjs-builder.

3) Minify bundles using gulp-uglify.

0
Tushar Tibude