Quelles sont les différences entre SystemJS et Webpack?
Je crée ma première application angulaire et je devrais comprendre quel est le rôle des chargeurs de modules ... Pourquoi nous en avons besoin? J'ai essayé de chercher et de chercher sur Google et je ne comprends pas pourquoi nous devons installer l'un d'eux pour exécuter notre application?
Ne pourrait-il pas suffire d'utiliser simplement import pour charger des éléments à partir de modules de nœud?
J'ai suivi ce tutoriel (qui utilise SystemJS) et me fait utiliser le fichier systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'transpiled', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
Pourquoi avons-nous besoin de ce fichier de configuration?
Pourquoi avons-nous besoin de SystemJS (ou WebPack ou d’autres)?
Enfin, à votre avis, quel est le meilleur?
Si vous allez à la page SystemJS Github, vous verrez la description de l'outil:
Chargeur de module dynamique universel - charge les modules ES6, AMD, CommonJS et les scripts globaux dans le navigateur et NodeJS.
Comme vous utilisez des modules dans TypeScript ou ES6, vous avez besoin d'un chargeur de modules. Dans le cas de SystemJS, le systemjs.config.js nous permet de configurer la manière dont les noms de modules sont mis en correspondance avec les fichiers correspondants.
Ce fichier de configuration (et SystemJS) est nécessaire si vous l’utilisez explicitement pour importer le module principal de votre application:
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
Lors de l'utilisation de TypeScript et de la configuration du compilateur sur le module commonjs, le compilateur crée un code qui n'est plus basé sur SystemJS. Dans cet exemple, le fichier de configuration du compilateur TypeScript devrait ressembler à ceci:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs", // <------
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
Webpack est un bundle de module flexible. Cela signifie qu’il va plus loin et qu’il ne gère pas seulement les modules mais offre également un moyen de mettre en package votre application (concaténer des fichiers, uglifier des fichiers, ...). Il fournit également un serveur de développement avec rechargement de la charge pour le développement.
SystemJS et Webpack sont différents, mais avec SystemJS, vous avez encore du travail (avec Gulp ou SystemJS builder par exemple) pour empaqueter votre application Angular2 en vue de la production.
SystemJS fonctionne côté client. Il charge les modules (fichiers) de manière dynamique à la demande quand ils sont nécessaires. Vous n'êtes pas obligé de charger toute l'application à l'avance. Vous pouvez charger un fichier, par exemple, dans un gestionnaire de clic sur un bouton.
Code SystemJS:
// example import at top of file
import myModule from 'my-module'
myModule.doSomething()
// example dynamic import (could be placed anywhere in your code)
// module not loaded until code is hit
System.import('my-module').then((myModule) {
// myModule is available here
myModule.doSomething()
});
Autre que de le configurer pour fonctionner, c'est tout ce qu'il y a pour SystemJS! Vous êtes maintenant un pro SystemJS!
Webpack est tout à fait différent et sa maîtrise est longue. Il ne fait pas la même chose que SystemJS mais, lors de l'utilisation de Webpack, SystemJS devient redondant.
Webpack prépare un fichier unique appelé bundle.js - Ce fichier contient tous les fichiers HTML, CSS, JS, etc. Etant donné que tous les fichiers sont regroupés dans un seul fichier, un chargeur paresseux comme SystemJS (où se trouvent des fichiers individuels) est désormais inutile. sont chargés au besoin).
L'avantage de SystemJS est ce chargement paresseux. L'application devrait se charger plus rapidement, car vous ne chargez pas tout en un seul coup.
L'avantage de Webpack est que, bien que le chargement initial de l'application puisse prendre quelques secondes, une fois chargé et mis en cache, il est extrêmement rapide.
Je préfère SystemJS mais Webpack semble être plus tendance.
Angular2 quickstart utilise SystemJS.
La CLI angulaire utilise Webpack.
Webpack 2 (qui proposera l’arborescence) est en version bêta, c’est donc peut-être un mauvais moment pour passer à Webpack.
Remarque SystemJS implémente la norme de chargement du module ES6 . Webpack est juste un autre module npm.
Coureurs de tâches (lecture facultative pour ceux qui veulent comprendre l'écosystème dans lequel SystemJS pourrait exister)
Avec SystemJS, le chargement paresseux des fichiers est la seule responsabilité. Il reste donc quelque chose à faire pour réduire ces fichiers, les copier (par exemple de SASS à CSS), etc. Ces tâches à effectuer sont appelées tasks.
Webpack, une fois configuré, le fait correctement pour vous (et regroupe la sortie ensemble). Si vous voulez faire quelque chose de similaire avec SystemJS, vous utiliserez généralement un programme d'exécution de tâches JavaScript. Le gestionnaire de tâches le plus populaire est un autre module npm appelé gulp .
Ainsi, par exemple, SystemJS peut charger paresseux un fichier JavaScript minifié qui a été minifié par gulp. Gulp, une fois correctement configuré, peut minifier des fichiers à la volée et recharger à la volée. Le rechargement en direct est la détection automatique d'une modification de code et l'actualisation automatique du navigateur pour la mise à jour. Grand pendant le développement. Avec CSS, la diffusion en direct est possible (c’est-à-dire que vous voyez la page mettre à jour les nouveaux styles sans que la page ne soit rechargée).
Webpack et gulp peuvent effectuer de nombreuses autres tâches qui seraient trop nombreuses pour être couvertes ici. J'ai fourni un exemple :)
Jusqu'à présent, j'utilisais systemjs. Il chargeait les fichiers un par un et le premier chargement prenait 3-4 secondes sans fichiers minifiés. Après le passage à WebPack, les performances de mon ordinateur ont été considérablement améliorées. Maintenant, il suffit de charger un seul fichier bundle (également des polyfill et des bibliothèques de fournisseurs qui n’ont presque jamais changé et qui sont presque toujours mis en cache), et c'est tout. Maintenant, il ne faut qu'une seconde pour charger l'application côté client. Aucune logique supplémentaire côté client. Moins le nombre de fichiers individuels chargés est élevé, meilleure est la performance. Lors de l’utilisation de systemjs, vous devriez penser à importer des modules de manière dynamique pour économiser les performances. Avec Webpack, vous vous concentrez principalement sur votre logique, car les performances seront toujours bonnes une fois que le paquet aura été réduit et mis en cache dans votre navigateur.