web-dev-qa-db-fra.com

Comment combiner (réduire) compilé Angular 2 composants?

essayant de réduire le code source compilé d'un projet pour la production, j'utilise Gulp comme exécuteur de tâches.

les fichiers source ressemblent à ceci,

html

<!--... . .  various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

la structure du répertoire de mon application est la suivante,

.
├── main.js
├── main.js.map
├── main.ts
├── main.app.js
├── main.app.js.map
├── main.app.ts
├── x.component1
│   ├── x.component.one.js
│   ├── x.component.one.js.map
│   └── x.component.one.ts
└── x.component2
    ├── x.component.two.js
    ├── x.component.two.js.map
    └── x.component.two.ts

app/main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {MyAwesomeApp} from './main.app'

bootstrap(MyAwesomeApp);

main.app.ts

@Component({
    selector: 'app',
    template: `
        <component-1></component-1>

        <component-2></component-2>
    `,
    directives: [Component1, Component2]
})


export class MyAwesomeApp {

}

puis les composants,

@Component({
    selector: 'component-1',
    template: `
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
    `
})


export class Component1 {

}

et

@Component({
    selector: 'component-2',
    template: `
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
    `
})


export class Component2 {

}

Tous les fichiers TypeScript sont compilés en JavaScript ES5, doivent être minifiés en main.js

donc mes questions sont,

  1. Puis-je exécuter une tâche pour collecter tous les _ .js fichiers à réduire en un seul fichier et à référencer comme main dans la branche de production?
  2. Est-ce que cela interrompt l'importation du système de modules {x} à partir de 'y'?
  3. S'il brise le système de chargement du module, que peut-on faire pour concaténer des fichiers sur une application Angular 2?

ma version TypeScript est, 1.8.2

Merci pour toute aide.

javascriptangularminify
24
Rivadiz

Si vous souhaitez compiler tous vos fichiers TypeScript en un seul, vous devez utiliser la propriété outFile du compilateur TypeScript. Il est configurable via le plugin gulp-TypeScript.

De cette façon, vous n'avez pas besoin de configurer SystemJS pour charger le module en fonction des noms de fichiers:

<script>
  // Not necessary anymore
  /* System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  }); */
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

Les noms des modules et leur contenu sont désormais présents dans ce fichier unique. De la même manière pour les fichiers bundle packagés de la distribution Angular2 (angular2.dev.js, http.dev.js, ...). Pour utiliser ce fichier, incluez-le simplement dans un élément script.

De cette façon, vous n'interromprez pas les importations de modules.

Ensuite, vous pouvez réduire ce fichier avec le plugin uglify de gulp ...

7
Thierry Templier

** Créez un fichier unique à partir de TS avec des options dans tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

** Construisez le fichier de sortie et incluez comme suit: Exemple:

<script>


  // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
  // the bundle at build/all.js contains these modules
System.config({
    bundles: {
      'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider']
    }
  });

  // when we load 'app/app' the bundle extension interrupts the loading process
  // and ensures that boot of build/all.js is loaded first
  System.import('boot');


    </script>

** Réduisez le fichier all.js comme vous le faites normalement.

3
Gary

Si vous utilisez @angular/cli vous pouvez exécuter

ng build --prod

pour réduire et compresser le code.

1
All Іѕ Vаиітy

Puisque vous utilisez déjà Gulp, vous pouvez simplement ajouter webpack dans votre tâche gulp pour combiner tous vos fichiers source JavaScript (ainsi que les sources Angular2) en un seul. Voici un exemple de ce à quoi pourrait ressembler votre webpack.config.js :

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

Les sections pertinentes de votre gulpfile.js sont

var webpack = require('webpack-stream');
var htmlReplace = require('gulp-html-replace');
var gulp = require('gulp');

gulp.task('webpack', function() {
  return gulp.src('src/app/*.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

Remplacez gulp.dest('src/') par l'emplacement approprié dans lequel vous souhaitez que votre code de production réside.

Vous devez ensuite traiter vos fichiers HTML pour avoir les références de fichier source JavaScript appropriées (également dans gulpfile.js ).

gulp.task('html', ['templates'], function() {
  return gulp.src('src/index.html')
    .pipe(htmlReplace({
      'js': ['bundle.js']
    }))
    .pipe(gulp.dest('dist/'));
});

Si vous souhaitez réduire vos fichiers JavaScript, vous pouvez utiliser glifyJS2 . (Notez cependant qu'il y a quelque chose qui ne va pas avec l'obscurcissement, d'où le mangle: false. Voir ceci lien SO pour plus). Voici le contenu pertinent gulpfile.js :

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

De cette façon, votre code de production se retrouve dans votre dossier dist d'où vous pouvez le déployer. Maintenant, c'est à vous de choisir si vous enregistrez cela dans une branche de production ou non.

N'hésitez pas à vous référer à mon projet de mots sur Github si vous voulez voir une version de travail sur une très petite application Angular2.

1
carnun