Générer des SourceMaps pour un seul fichier js qui inclut des modules avec npm require et gulp

Question

Je commencerai tout de suite par un exemple de ma structure de code. Supposons que les trois fichiers triviales résident dans le même répertoire appelé /path/from/root/js/src

module1.js suivants:

console.log(1); 

module2.js:

console.log(2); 

app.js:

require('./module1'); 
require('./module2'); 

Ensuite, j'utilise la tâche de gulp suivante pour compiler javascript dans un fichier avec gulp:

var gulp = require('gulp'); 
var sourcemaps = require('gulp-sourcemaps'); 
var path = require('path'); 
var browserify = require('gulp-browserify'); 

gulp.task('default', function() { 
    gulp.src(['./js/src/app.js']) 
     .pipe(sourcemaps.init()) 
     .pipe(browserify()).on('error', function(err){ 
      console.log(err); 
     }) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(function(file) { 
      file.base = path.dirname(file.path); 
      return path.join(path.dirname(file.path), '/../'); 
     })) 
}); 

Après l'exécution gulp Je reçois le javascript compilé app.js qui se connecte à seulement 1 2 et un app.js.map comme prévu, mais il n'y a pas de référence au fichier d'origine dans le navigateur.

Vous pouvez vérifier qu'en regardant les lignes de console 1 et 2, elles sont référencées par app.js, et non par module1|2.js. Si j'avais besoin de réparer un bogue, je n'aurais aucune idée du fichier qui génèrera les notations de la console à l'avenir, car les fichiers grossissent dans mon projet.

Qu'est-ce que je fais mal? Est-ce que je n'utilise pas les sourcemaps correctement?

Le fichier app.js.map ne fait pas référence aux modules, il ressemble à ceci:

{ 
    "version":3, 
    "names":[], 
    "mappings":"", 
    "sources":["app.js"], 
    "sourcesContent":["require('./module1');\r\nrequire('./module2');"], 
    "file":"app.js" 
} 

Answer 1

J'ai trouvé une solution plus relative au problème, donc je crée une nouvelle réponse à ce problème. J'ai remarqué que le paquet gulp-browserify que j'utilisais était obsolète, donc j'ai vérifié pour une utilisation mise à jour.

Mes package.json dépendances sont:

"devDependencies": { 
    "babel-preset-es2015": "^6.24.1", 
    "babelify": "^7.3.0", 
    "browserify": "^14.4.0", 
    "gulp": "^3.9.1", 
    "gulp-sourcemaps": "^2.6.0", 
    "gulp-uglify": "^3.0.0", 
    "gulp-util": "^3.0.8", 
    "vinyl-buffer": "^1.0.0", 
    "vinyl-source-stream": "^1.1.0" 
} 

Mon gulpfile.js pour une construction de base ressemble à ceci:

'use strict'; 

var browserify = require('browserify'); 
var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var buffer = require('vinyl-buffer'); 
var uglify = require('gulp-uglify'); 
var sourcemaps = require('gulp-sourcemaps'); 
var gutil = require('gulp-util'); 

gulp.task('default', function() { 
    // set up the browserify instance on a task basis 
    var b = browserify({ 
     entries: './js/src/app.js', 
     debug: true 
    }).transform("babelify", {presets: ["es2015"]}); 

    return b.bundle() 
     .pipe(source('app.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     // Add transformation tasks to the pipeline here. 
     //.pipe(uglify()) 
     .on('error', gutil.log) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest('./js/')); 
}); 

Pour une version de production, vous pouvez décommenter la commande enlaidir. Babelify est là pour permettre la syntaxe ES5 (n'a pas testé, mais probablement vous pouvez aussi utiliser le paquet * 2017).

Sources:
1. Gulp setup for Browserify
2. Babel setup for Browserify

Answer 2

Utilisation de ROLLUP
Après avoir essayé différentes choses et construire des paquets en ligne, j'ai trouvé une solution à mon problème l'utilisation de rollup au lieu de browserify. Dans le cas où quelqu'un est intéressé, je vais ajouter ici mon build trivial dans l'utilisation de base avec rollup:

module1.js et module2.js restent tels quels.

app.js devient

import {m1} from './module1'; 
import {m2} from './module2'; 

Et mon gulpfile devient

var gulp = require('gulp'), 
    rollup = require('rollup') 
; 

gulp.task('default', function() { 
    return rollup.rollup({ 
     entry: "./js/src/app.js", 
    }) 
    .then(function (bundle) { 
     bundle.write({ 
      format: "umd", 
      moduleName: "library", 
      dest: "./js/app.js", 
      sourceMap: true 
     }); 
    }) 
}); 

Maintenant ouvrez votre fichier html qui comprend /js/app.js et vous verrez dans votre console 1 référencé par module1.js et 2 référencé par module2.js

Ressemble au sommaire ne prend pas en charge require par défaut, mais la syntaxe import {...} from ... est plus minimaliste et fait partie d'ES6, donc il serait peut-être mieux pour moi de commencer à l'utiliser à la place.

Source de documentation officielle: https://rollupjs.org/#using-rollup-with-gulp

Pour en savoir plus pour une construction plus complexe (je ne l'ai pas marché ces étapes encore, mais semble prometteur): https://github.com/rollup/rollup-starter-project

Toute la grêle Javascript malicieux puissant désordre pour la les ennuis nous conduisent!