Javascript Girl
  1. Javascript Girl
  3. Comment combiner (minify) compilé Angular 2 composants?
Intereting Posts
L'utilisateur nécessitant un accès au microphone demande des autorisations dans Chrome à plusieurs reprises Est-il possible d'obtenir tous les arguments d'une fonction en tant qu'objet unique à l'intérieur de cette fonction? Comment puis-je lancer un événement de clic de bouton lorsque la touche Entrée est pressée en fonction de la zone de texte qui a la mise au point? Est-il sûr d'adopter une comparaison stricte dans une déclaration de changement de JavaScript? Mozilla Firefox n'obtient pas de valeur innerText JSON Parse Error Using jQuery.parseJSON Comment obtenir l'URL du script avec RequireJS? Vitesse de PHP vs JavaScript? Dois-je revenir après avoir résolu / rejeté tôt? Comment puis-je utiliser jQuery promis / défiguré dans une fonction personnalisée? JQuery: Puis-je obtenir une référence aux événements liés sur un élément? Pourquoi le «nom» variable ne doit-il pas être initialisé après la première utilisation Fermetures dans une boucle et environnement lexical Comment puis-je stocker le numéro dans une entrée de formulaire html en tant que variable javascript lorsqu'un bouton est cliqué? Nil n'est pas défini en vérifiant si l'utilisateur est connecté

Comment combiner (minify) compilé Angular 2 composants?

En essayant de minimiser le code source compilé d'un projet pour la production, j'utilise Gulp comme le responsable de la tâche.

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>

Ma structure de répertoire d'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 { }

Ensuite, 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 sous JavaScript ES5, doivent ensuite être minifiés vers main.js

Donc mes questions sont,

  1. Puis-je exécuter une tâche pour collecter tous les fichiers .js compilés pour miniffer dans un seul fichier et le référencer comme main dans la branche de production?
  2. Est-ce que cela empêche l'importation du système du module {x} de 'y'?
  3. Si elle casse 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 de votre aide.

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

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

 <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 maintenant présents dans ce fichier unique. De la même manière pour les fichiers groupés emballés de la distribution angular2.dev.js ( angular2.dev.js , http.dev.js , …). Pour utiliser ce fichier, il suffit de l'inclure dans un élément de script .

De cette façon, vous ne rayerez pas les importations du module.

Ensuite, vous pouvez minimiser ce fichier unique avec le plugin uglify de gulp …

** Créez un fichier unique 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.

** Créez 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>

** Minimisez le fichier all.js comme vous le faites normalement.

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

 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/') avec l'emplacement pertinent dans lequel vous souhaitez que votre code de production réside.

Vous devez ensuite traiter vos fichiers HTML pour avoir les références appropriées du fichier source JavaScript (é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 diminuer vos fichiers JavaScript, vous pouvez utiliser UglifyJS2 . (Notez cependant qu'il y a quelque chose qui ne va pas avec l'obfuscation, d'où le mangle: false . Voir ce lien SO pour plus). Voici le contenu pertinent de 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 où vous pouvez le déployer. Maintenant, c'est votre choix, que ce soit dans une branche de production ou non.

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

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

 ng build --prod

Pour minimiser et gzip le code.