Create SourceMaps for a single js file that includes npm and gulp modules

Question

I will start with an example of my code structure. Suppose the following three trivial files are inside the same directory with the name/path/from/root/js/src

module1.js:

console.log(1);

module2.js:

console.log(2);

app.js:

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

Then I use the following gulp task to compile javascript into a single file using 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), '/../');
        }))
});

After starting, gulpI get compiled javascript app.jsthat just logs 1 2 and app.js.map, as expected, but the link to the source file is missing in the browser.

, 1 2, app.js, module1|2.js. , , , .

? ?

app.js.map , :

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

Answer 1

, . , gulp-browserify, , , .

package.json:

"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"
}

My gulpfile.js :

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

uglify. Babelify , ES5 ( , , , * 2017).

:
1. Gulp
2. Babel Browserify

Answer 2

, rollup browserify. , - , rollup:

module1.js module2.js , .

app.js

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

gulpfile

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

html , /js/app.js, 1 module1.js 2, module2.js

, rollup require , import {...} from ... ES6, .

: https://rollupjs.org/#using-rollup-with-gulp

( , ): https://github.com/rollup/rollup-starter-project

Javascript , !