为单个 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 引用的。如果我需要修复一个错误，随着我的项目中的文件越来越大，我不知道将来哪个文件会生成控制台符号。

我做错了什么？我没有正确使用 sourcemaps 吗？

app.js.map 文件没有引用模块，它看起来像这样：

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

Answer 1

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

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

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

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

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

所有人都为它给我们带来的麻烦欢呼Javascript！

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

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

Generate SourceMaps for a single js file which includes modules with npm require and gulp

require

source-maps

gulp-sourcemaps