Estoy creando mi primera Angular de la aplicación y me gustaría saber ¿cuál es el rol de los módulo de cargadores.
Por qué los necesitamos?
Traté de buscar y buscar en Google y no puedo entender por qué necesitamos instalar uno de ellos para ejecutar nuestra aplicación?

No podría ser suficiente utilizar sólo import para cargar cosas desde el nodo módulos?

He seguido este tutorial (que utiliza SystemJS) y me hace uso de systemjs.config.js de archivo:

/**
 * 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);

¿Por qué necesitamos este archivo de configuración?

Por qué necesitamos SystemJS (o WebPack u otros)?

Por último, en su opinión, ¿cuál es el mejor?

Aquí puede leer el artículo muy bueno para comparar SystemJs(Jspm) con Webpack ilikekillnerds.com/2015/07/jspm-vs-webpack.
ver esta respuesta stackoverflow.com/a/40670147/2545680 para SystemJS

OriginalEl autor smartmouse | 2016-07-08

3 Comentarios

  1. 111

    Si usted va a la SystemJS página de Github, veremos la descripción de la herramienta:

    Universal dinámico módulo de gestor de cargas ES6 módulos, AMD, CommonJS y global de secuencias de comandos en el navegador y NodeJS.

    Porque el uso de los módulos en Manuscrito o ES6, usted necesita un cargador de módulo. En el caso de SystemJS, el systemjs.config.js nos permite configurar la manera en que los nombres de los módulos que se corresponden con sus correspondientes archivos.

    Este archivo de configuración (y SystemJS) es necesario en caso de utilizar explícitamente que importar el módulo principal de la aplicación:

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    

    Cuando se utiliza el Manuscrito, y configurar el compilador para el commonjs módulo, el compilador genera código que ya no se basa en SystemJS. En este ejemplo, el manuscrito compilador archivo de configuración aparecerá como este:

    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs", //<------
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      }
    }
    

    Webpack es un módulo flexible bundler. Esto significa que va más allá y no sólo se ocupan de módulos, sino que también proporciona una forma de paquete de la aplicación (concat archivos, uglify archivos, …). También proporciona un dev server con la carga de recarga para el desarrollo

    SystemJS y Webpack son diferentes, pero con SystemJS, usted todavía tiene trabajo que hacer (con Trago o SystemJS generador de por ejemplo) para el paquete de su Angular2 aplicación para la producción.

    Cuando dices «con SystemJS, usted todavía tiene trabajo que hacer (con Trago o SystemJS generador por ejemplo) para el paquete de su Angular2 aplicación para la producción» es lo que en la actualidad recibe con npm start?
    De hecho, para la producción, no es eficiente para cargar una gran cantidad de archivos de los módulos (archivos Individuales (~300 solicitudes) o Agrupados (~40 solicitudes)). Usted necesidad de reunir todo en uno o dos (su código y la tercera parte del código de la biblioteca), compilar sin conexión de sus plantillas (ngc) y aprovechar árbol de agitación para minimizar el peso de los paquetes. Este artículo también puede interesarte: blog.mgechev.com/2016/06/26/…. Usted también necesita uglify archivos CSS.
    Con npm start, que «simplemente» iniciar un servidor que servirán para su aplicación, en función de su SystemJS de configuración para los módulos de…
    Google ha pasado oficialmente a webpack. Así que supongo que es mejor ceñirse a lo que la mayoría de la comunidad pueda estar utilizando. Estoy migrando mi systemJS proyecto para webpack pronto. No del todo seguro de cómo hacerlo, aunque.
    ese es el caso de angular de la cli. Ver en este enlace: github.com/angular/angular-cli en la sección «Webpack actualización»?

    OriginalEl autor Thierry Templier

  2. 168

    SystemJS obras de lado del cliente. Carga de módulos (archivos) de forma dinámica en la demanda cuando se necesitan. Usted no tiene que cargar toda la aplicación hasta el frente. Usted podría cargar un archivo, por ejemplo, dentro de un botón haga clic en controlador.

    SystemJS código:

    //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()
    });
    

    Otros que configurarlo para trabajar, que es todo lo que hay SystemJS! Ahora eres un SystemJS pro!

    Webpack es totalmente diferente y se lleva para siempre a la maestra. No es lo mismo que SystemJS pero, cuando se utiliza Webpack, SystemJS se vuelve redundante.

    Webpack prepara un único archivo llamado bundle.js – Este archivo contiene todos los HTML, CSS, JS, etc. Debido a que todos los archivos están empaquetados en un solo archivo, ahora no hay necesidad de un lazy loader como SystemJS (donde cada uno de los archivos
    se carga según sea necesario).

    La boca de SystemJS es esta carga diferida. La aplicación debe cargar más rápido porque no cargar todo en un solo golpe.

    La boca de Webpack es que, aunque la aplicación puede tardar unos segundos en cargar al principio, una vez que se carga y se almacena en caché es rápido como un rayo.

    Prefiero SystemJS pero Webpack parece estar más a la moda.

    Angular2 de inicio rápido utiliza SystemJS.

    Angular CLI utiliza Webpack.

    Webpack 2 (que va a ofrecer el árbol de agitación) está en beta así que tal vez es un mal momento para pasar a Webpack.

    Nota SystemJS es la aplicación de la ES6 módulo de carga estándar. Webpack es sólo otro mecanismo nacional de prevención módulo.

    Tarea de los corredores (de lectura opcional para aquellos que quieren entender el ecosistema en el que SystemJS podría existir)

    Con SystemJS su única responsabilidad es la carga diferida de los archivos a fin de algo que aún es necesario comprimir los archivos, transpile los archivos (por ejemplo, de SASS a CSS), etc. Estas tareas que se deben hacer son conocidos como tareas.

    Webpack, cuando se configura correctamente, lo hace por usted (y haces la salida juntos). Si quieres hacer algo similar con SystemJS lo normal sería usar un JavaScript task runner. El más popular task runner es otro mecanismo nacional de prevención módulo llamado trago.

    Así, por ejemplo, SystemJS podría cargue un record de archivo JavaScript que ha sido record de por trago. Gulp, cuando el programa de instalación correctamente, puede comprimir los archivos sobre la marcha y en vivo a cargar. Vivir la recarga automática de la detección de un cambio de código y un sistema automático de navegador actualizar para actualizar. Grandes durante el desarrollo. Con CSS, la transmisión en vivo es posible (es decir, ves a la página de actualización de los nuevos estilos sin que la página incluso recargar).

    Hay muchas otras tareas que Webpack y trago puede realizar el que sería demasiado numerosos para cubrir aquí. He dado un ejemplo 🙂

    A mí también me parece SystemJS y JSPM mucho más fácil de trabajar que el webpack. También he encontrado la producción haces para ser más pequeñas ( en comparación con el otro webpack proyecto de ejemplo ). Aquí está mi post sobre el tema: stackoverflow.com/questions/40256204/…
    Usted puede utilizar Webpack & carga Diferida con el uso de angular2-router-loader. Ver más medium.com/@daviddentoom/…
    Estás equivocado acerca de Webpack! Permite combinar agrupación con carga diferida. Por otra parte, de forma transparente paquetes diferido módulos en trozos.
    gracias por el ejemplo! Yo estaba buscando algo así 🙂
    Una actualización en Webpack & carga Diferida. Última reencarnación del paquete es de ng-router-cargador. Se incluye en AngularClass/angular-motor de arranque (Angular4 Webpack de Arranque).

    OriginalEl autor danday74

  3. 0

    Hasta ahora estaba usando systemjs. Fue la carga de archivos uno por uno y en la primera carga fue tomar de 3 a 4 segundos sin record de archivos. Después de cambiar a webpack tengo una gran mejora en el rendimiento. Ahora sólo se tarda para cargar un archivo de paquete (también polyfills y proveedor de libs que casi nunca cambió y casi siempre en caché) y eso es todo. Ahora sólo hace falta un segundo para cargar el lado cliente de la aplicación. No hay más lógica del lado del cliente. Como menos de la cantidad de archivos que se cargan como mayor es el rendimiento. Cuando se utiliza systemjs usted debe pensar acerca de la importación de los módulos dinámicamente para guardar en el rendimiento. Con webpack que se centran principalmente en su lógica debido a que el rendimiento va a estar bien una vez que el paquete se reducirá y la caché de tu navegador.

    Sólo respondió una de OP preguntas, hubiera sido mejor hacer un comentario.

    OriginalEl autor Hrach Gyulzadyan

Dejar respuesta

Please enter your comment!
Please enter your name here