为单个 js 文件生成 SourceMaps，其中包括带有 npm require 和 gulp 的模块

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

使用汇总
在尝试了各种东西并在线构建包之后，我找到了使用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
        });
    })
});

现在打开包含/js/app.js 的html 文件，您将在控制台中看到module1.js 引用的1 和module2.js 引用的2

看起来 rollup 默认不支持 require，但 import {...} from ... 语法更简约，是 ES6 的一部分，所以我最好开始使用它。

来自官方文档：https://rollupjs.org/#using-rollup-with-gulp

进一步阅读以获得更复杂的构建（我还没有完成这些步骤，但看起来很有希望）：https://github.com/rollup/rollup-starter-project

为它给我们带来的麻烦而欢呼！

Answer 2

我找到了一个更相关的问题解决方案，所以我正在为它创建一个新的答案。我注意到我使用的 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/'));
});

对于生产版本，您可以取消注释 uglify 命令。 Babelify 允许 ES5 语法（没有测试，但也许你也可以使用 *2017 包）。

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