Quelles sont les différences entre SystemJS et Webpack?
Je suis de créer mon premier Angulaire de l'application, et je voudrais savoir quel est le rôle du module de chargeurs.
Pourquoi nous avons besoin d'eux?
J'ai essayé de rechercher et de recherche sur Google et je ne comprends pas pourquoi nous avons besoin d'installer l'un d'entre eux pour exécuter notre application?
Ne pourrait-elle pas être suffisant d'utiliser import
pour charger des trucs de nœud modules?
J'ai suivi ce tutoriel (qui utilise SystemJS) et il me fait de l'utilisation 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 nous avons besoin de ce fichier de configuration?
Pourquoi nous avons besoin de SystemJS (ou WebPack ou autres)?
Enfin, à votre avis, quel est le mieux?
- Ici vous pouvez lire vraiment bon article pour comparer SystemJs(Jspm) avec Webpack ilikekillnerds.com/2015/07/jspm-vs-webpack.
- voir cette réponse stackoverflow.com/a/40670147/2545680 pour SystemJS
Vous devez vous connecter pour publier un commentaire.
Si vous allez à la SystemJS Github page, vous pourrez voir la description de l'outil:
Parce que vous utilisez des modules en caractères d'imprimerie ou de l'ES6, vous avez besoin d'un chargeur de module. Dans le cas de SystemJS, le
systemjs.config.js
nous permet de configurer la manière dont les noms de module sont appariés avec leurs fichiers correspondants.Ce fichier de configuration (et SystemJS) est nécessaire si vous l'avez explicitement l'utiliser pour importer le module principal de votre application:
Lors de l'utilisation de la Machine et la configuration du compilateur à la
commonjs
module, le compilateur crée un code qui n'est plus fondée sur SystemJS. Dans cet exemple, le tapuscrit compilateur fichier de configuration apparaît comme ceci:Webpack est un flexible module bundler. Cela signifie qu'il va plus loin et ne traite pas seulement des modules, mais fournit également un moyen de package de votre application (concat fichiers, uglify fichiers, ...). Il fournit également un serveur de dev avec la charge de rechargement 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 le paquet de votre Angular2 application pour la production.
npm start
?SystemJS fonctionne côté client. Il charge les modules (fichiers) de manière dynamique à la demande quand ils sont nécessaires. Vous n'avez pas à charger la totalité de l'app à l'avant. Vous pouvez charger un fichier, par exemple, à l'intérieur d'un clic sur un bouton gestionnaire.
SystemJS code:
Autre qu'une configuration de travail, que tout y est à SystemJS! Vous êtes maintenant un SystemJS pro!
Webpack est tout à fait différent et prend une éternité à maîtriser. 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. Parce que tous les fichiers sont regroupés dans un seul fichier, il n'y a aucun besoin pour un lazy loader comme SystemJS (où les fichiers individuels
sont chargés en tant que de besoin).
La hausse de SystemJS est-ce chargement paresseux. L'application devrait se charger plus vite parce que vous ne chargez pas tout d'un seul coup.
La hausse de Webpack est que, bien que l'application peut prendre quelques secondes pour se charger d'abord, une fois chargé et mis en cache, il est rapide comme l'éclair.
Je préfère SystemJS mais Webpack semble être plus à la mode.
Angular2 de démarrage rapide utilise SystemJS.
Angulaire de la CLI utilise Webpack.
Webpack 2 (qui offrira un arbre secoué) est en version beta, donc peut-être que c'est un mauvais moment à passer à Webpack.
Note SystemJS est la mise en œuvre de la ES6 chargement du module standard. Webpack est juste un autre module npm.
Tâche des coureurs (facultatif pour ceux qui veulent comprendre l'écosystème dans lequel SystemJS pourrait exister)
Avec SystemJS sa seule responsabilité est le lazy loading des fichiers si quelque chose est encore nécessaire pour minifier les fichiers, transpile ces fichiers (par exemple, de SASS en CSS), etc. Ces tâches qui doivent être faites sont connus comme tâches.
Webpack, lorsqu'il est configuré correctement, en fait cela pour vous (et les faisceaux de la sortie). Si vous voulez faire quelque chose de similaire avec SystemJS vous utilisez généralement une JavaScript task runner. Les plus populaires task runner est un autre mnp module appelé gulp.
Ainsi, par exemple, SystemJS pourrait lazy load un minifiés fichier JavaScript qui a été minimisé par gorgée. Gulp, lorsque le programme d'installation correctement, peut minifier les fichiers à la volée et de vivre recharger. En direct de rechargement est la détection automatique de changement de code automatique d'actualiser de votre navigateur pour mettre à jour. Grand cours de développement. Avec les CSS, la diffusion en direct est possible (c'est à dire vous consultez la page mise à jour le nouveaux styles sans la page même de rechargement).
Il existe de nombreuses autres tâches qui Webpack et gulp pouvez effectuer qui seraient trop nombreux pour couvrir ici. J'ai fourni un exemple 🙂
angular2-router-loader
. Voir plus medium.com/@daviddentoom/...Jusqu'à présent j'ai été en utilisant systemjs. Il était en train de charger les fichiers un par un et la première charge a été prise de 3-4 secondes sans fichiers minifiés. Après le passage à webpack j'ai eu une grande amélioration de la performance. Maintenant, il ne prend que de charger un fichier bundle (également polyfills et et le vendeur libs qui presque jamais changé, et presque toujours mis en cache) et c'est tout. Maintenant, il suffit d'une seconde pour charger le côté client de l'app. Aucune autre côté client de la logique. Moins le nombre de fichiers chargés en tant que supérieur de la performance. Lors de l'utilisation de systemjs vous devriez penser à l'importation des modules de façon dynamique pour enregistrer de la performance. Avec webpack vous vous concentrez principalement sur votre logique, car le rendement sera encore une fois le bundle est minimisé et mis en cache dans le navigateur.