Quelles sont les différences entre SystemJS et Webpack?
je crée ma première application angulaire et je voudrais comprendre quel est le rôle des chargeurs de modules. Pourquoi nous avons besoin d'eux? J'ai essayé de chercher et de rechercher sur Google et je ne peux pas comprendre pourquoi nous avons besoin d'installer l'un d'eux pour exécuter notre application?
ne pourrait-il pas suffire d'utiliser import pour charger des objets à partir de modules de noeuds?
j'ai suivi ce tutoriel (qui utilise SystemJS) et il me fait à utiliser systemjs.config.js fichier:
/**
* 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 autres)?
Enfin, à votre avis, quel est le mieux?
3 réponses
si vous allez à la page SystemJS Github, vous verrez la description de l'outil:
chargeur de module dynamique universel-charge des modules ES6, AMD, CommonJS et scripts globaux dans le navigateur et NodeJS.
parce que vous utilisez des modules en 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 façon dont les noms de modules sont appariés avec leur correspondant fichier.
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 au module commonjs , le compilateur crée du code qui n'est plus basé sur SystemJS. Dans cet exemple, le fichier de configuration du compilateur dactylographié apparaîtrait comme ceci:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs", // <------
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
Webpack est un module flexible bundler. Cela signifie qu'il va plus loin et ne traite pas seulement les modules mais fournit également un moyen de Packager votre application (Fichiers concat, fichiers uglify,....)...). Il fournit également un serveur dev avec recharge de charge pour le développement
SystemJS et Webpack sont différents mais avec SystemJS, vous avez encore du travail à faire (avec Gulp ou SystemJS builder par exemple) pour empaqueter votre application Angular2 pour la production.
SystemJS fonctionne côté client. Il charge les modules (fichiers) dynamiquement sur demande quand ils sont nécessaires. Vous n'avez pas à charger toute l'application à l'avance. Vous pouvez charger un fichier, par exemple, à l'intérieur d'un clic sur un bouton gestionnaire.
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()
});
à part le fait de le configurer pour qu'il fonctionne, C'est tout ce qu'il y a à SystemJS! vous êtes maintenant un SystemJS pro!
Webpack est entièrement différentes et prend une éternité à maîtriser. Il ne fait pas la même chose que SystemJS mais, en utilisant Webpack, SystemJS devient redondant.
Webpack prépare un seul fichier appelé bundle.js-ce fichier contient tout HTML, CSS, JS, etc. Comme tous les fichiers sont regroupés en un seul fichier, il n'est plus nécessaire d'avoir un chargeur paresseux comme SystemJS (où les fichiers individuels sont chargés en tant que de besoin).
L'envers de SystemJS est ce chargement paresseux. App devrait charger plus rapidement parce que vous ne chargez pas tout en un coup.
L'envers de Webpack est que, bien que l'application peut prendre quelques secondes à charger initialement, une fois chargé et caché, il est très rapide.
je préfère SystemJS mais Webpack semble être plus tendance.
Angular2 quickstart utilise SystemJS.
CLI angulaire utilise Webpack.
Webpack 2 (qui offrira l'arbre secouer) est en beta donc peut-être que c'est un mauvais moment pour passer à Webpack.
Note SystemJS implémente le ES6 module loading standard . Webpack est juste un autre module npm.
groupe de coureurs (facultatif pour ceux qui veulent comprendre l'écosystème dans lequel SystemJS pourrait exister)
avec SystemJS sa seule responsabilité est le chargement paresseux de fichiers donc quelque chose est encore nécessaire pour miniifier ces fichiers, transférer ces fichiers (par exemple de SASS à CSS), etc. Ces travaux qui doivent être effectués sont connus comme tâches .
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 utilisez typiquement un gestionnaire de tâches JavaScript. Le coureur de tâche le plus populaire est un autre module npm appelé gulfp .
ainsi, par exemple, SystemJS pourrait paresseux charger un fichier JavaScript minifié qui a été minifié par gulfp. Gulp, lorsqu'il est configuré correctement, peut miniifier des fichiers à la volée et recharger en direct. Le rechargement en direct est la détection automatique d'un changement de code et d'un rafraîchissement automatique du navigateur à mettre à jour. Grand cours de développement. Avec CSS, Le streaming en direct est possible (i.e. vous voyez la page Mettre à jour les nouveaux styles sans même la page recharger).
Il ya beaucoup D'autres tâches que Webpack et gulfp peuvent effectuer qui serait trop nombreux à couvrir 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 minified. Après le passage à webpack j'ai eu une grande amélioration de performance. Maintenant, il suffit de charger un fichier package (aussi polyfills et et libs vendeur qui n'ont presque jamais changé et 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 du côté du client. Comme moins le nombre de fichiers individuels chargés comme plus le performance. Lors de l'utilisation de systemjs vous devriez penser à importer des modules dynamiquement pour enregistrer dans la performance. Avec webpack vous vous concentrez principalement sur votre logique parce que les performances seront toujours bonnes une fois que le paquet est minifié et mis en cache dans votre navigateur.