为包含npm require和gulp模块的单个js文件生成SourceMaps

Question

我将直接以我的代码结构为例。假设以下三个简单文件驻留叫同一个目录内/path/from/root/js/src

module1.js：

console.log(1); 

module2.js：

console.log(2); 

app.js：

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

然后，我正在使用下面的gulp任务来将JavaScript编译成一个文件，其中包含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), '/../'); 
     })) 
}); 

运行gulp后我收到编译的JavaScript app.js刚刚记录1 2和app.js.map如预期，但在浏览器中的原始文件没有提及。

您可以通过查看控制台行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" 
} 

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

对于生产版本，你可以取消的丑化命令。 Babelify有允许ES5语法（没有测试，但也许你可以改用* 2017年包过）。

来源：
1. Gulp setup for Browserify
2. Babel setup for Browserify

Answer 2

使用汇总
尝试不同的东西后，并在网上建立包，我已经找到了解决我的问题使用rollup代替browserify。在有人感兴趣的情况下，我会在这里添加我的基本用法的简单构建汇总：

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

看起来像汇总默认情况下不支持require，但import {...} from ...语法更简约，是ES6的一部分，所以对我而言，开始使用它可能会更好。从官方文档

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

进一步阅读的一个更复杂的版本（我还没有完成这些步骤又走了，但看起来很有希望）：https://github.com/rollup/rollup-starter-project

所有冰雹强大凌乱恶意的JavaScript的麻烦引导我们！