爲包含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的麻煩引導我們！