为单个 js 文件生成源映射，该文件包含具有 npm require 和 gulp 的模块

Question

我将从一个代码结构的例子开始。假设以下三个简单的文件驻留在名为/path/from/root/js/src的同一目录中

模块1.js：

console.log(1);

模块2.js：

console.log(2);

应用.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后，我得到了编译的javascriptapp.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');rnrequire('./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. 浏览器化
2.Babel 设置 for Browserify