Javascript Maps

Cuando tu proyecto depende de muchos scripts Javascript, algo muy práctico es concatenar los archivos, pero el problema es que no es fácil debugear debido a que tienes un archivo muy grande que no tiene ninguna relación con tus archivos fuentes. Para solucionar este problema se inventaron los .map que son un mapeo entre el archivo concatenado con los fuenteso.

Para hacer esto mediante Grunt se puede usar concat.

grunt install grunt-contrib-concat --save-dev

Se debe poner en True la opción de sourceMap.

 grunt.initConfig({ 
    concat: {
      options: {
        separator: ';',
        sourceMap: true
      },
      dist: {
        src: ['node_modules/underscore/underscore.js', 
                 'node_modules/d3/d3.js', 
                 'lib/**/*.js'],
        dest: 'dist/lib.js',
      }
    } 
  }); 


grunt.loadNpmTasks('grunt-contrib-concat');

Al ejecutar:

grunt concat

Se crean dos archivos archivos dist/lib.js y dist/lib.js.map.

Luego en lugar de incluir todas las bibliotecas se incluye solamente la versión concatenada.

<script src='dist/lib.js'></script>

Google Chrome automáticamente detecta cuando al lado de una biblioteca hay un archivo .map y te permite las siguientes cosas:

• Si se quiere ingresar un break point se puede hacer directamente en algún archivos fuente.
• Si es que hay un error en el código se va mostrar el archivo fuente en que se produce y no el archivo concatenado.

​

d3.js intro

Se agrega mediante npm:

 npm install d3 --save

Se incluye el script en el html:

  <script src='node_modules/d3/d3.min.js'></script>

Un ejemplo my sencillo en que se agrega un elemento al body:

d3.select('body')
  .append('p')
  .text('hello world')
  ;

​