Javascript 在我的代码周围添加这个包装器是什么？ 总结

我正在

TypeScript

中编写Angular 2应用程序，并使用

SystemJS

和

Gulp

部署它。我在尝试使用sourcemaps时遇到了一个奇怪的问题。如果我内联包含sourcemap，一切都会正常工作。如果我使用外部映射文件，

SystemJS

似乎在我不理解的代码周围添加了一个包装器，破坏了浏览器查找源映射的能力。我想弄清楚到底发生了什么，以及如何修复它

内联映射工作 gulpfile.js下面是将TypeScript编译为JavaScript的任务

gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(sourcemaps.init()) //gulp-sourcemaps
        .pipe(typescript(tsProject)) //gulp-typescript
        .pipe(sourcemaps.write()) //map will be inline
        .pipe(gulp.dest(appProd));
});

磁盘和浏览器中生成的JS文件（login.component.JS）的结尾如下：

165| exports.LoginComponent = LoginComponent;
166| 
167| //# sourceMappingURL=data:application/json;base64,eyJ2Z...

165| exports.LoginComponent = LoginComponent;
166| 
167| //# sourceMappingURL=login.component.js.map
168| 
169| }).apply(__cjsWrapper.exports, __cjsWrapper.args);
170| })(System, System);
171| //# sourceURL=http://example.com/path/to/login.component.js

浏览器能够使用内联映射让我查看源TypeScript文件。没问题

外部地图被破坏了 gulpfile.js生成外部地图

gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript(tsProject))
        .pipe(sourcemaps.write('.')) //map will be external
        .pipe(gulp.dest(appProd));
});

磁盘上生成的JS文件（login.component.JS）与上面相同，只是第167行不同：

165| exports.LoginComponent = LoginComponent;
166| 
167| //# sourceMappingURL=login.component.js.map

当我在浏览器中查看源文件时，该文件的结尾如下所示：

165| exports.LoginComponent = LoginComponent;
166| 
167| //# sourceMappingURL=data:application/json;base64,eyJ2Z...

165| exports.LoginComponent = LoginComponent;
166| 
167| //# sourceMappingURL=login.component.js.map
168| 
169| }).apply(__cjsWrapper.exports, __cjsWrapper.args);
170| })(System, System);
171| //# sourceURL=http://example.com/path/to/login.component.js

地图文件login.component.js.map在同一目录中正确生成，但Firefox从未获取它。这种包装破坏了Firefox加载sourcemap的能力。为什么浏览器加载后，gulp任务生成的文件与同一个文件不同

更新 @下面的robisim74帮助我缩小了问题的范围：似乎包装与Firefox无法加载外部地图的原因无关。相反，Firefox无法解析

sourceMappingURL

中的相对路径。在我上面的最后一段摘录中，如果我将第167行更改为：

//# sourceMappingURL=login.component.js.map

致：

然后Firefox将加载地图！因此，我使用函数的

SourceMappingURL

参数在链接到地图时使用完整的URL。因此，我将我的

gulpfile.js

typescript构建任务从我上面发布的内容（外部映射被破坏）更改为：

这将sourcemaps放在与前面相同的单独文件中，但它将第167行（来自上面的文件摘录）转换为：

现在Firefox可以使用地图向我显示Typescript源代码

---

PS：这是交叉发布的

应该是Firefox的问题：。另见。 Sourcemap inline仍然可以工作，因为它位于同一个js文件中

编辑。 发布

js

和

js.map

文件时，js文件包含：

// # sourceMappingURL = [file name].js.map.

---

这是一条相对路径，Chrome能够识别，Firefox不能识别。事实上，如果您手动用绝对路径更正路径，您将看到Firefox找到了它们。转换不是从TypeScript到Javascript，而是相反：sourcemaps文件用于浏览器，以在TypeScript中重建源文件，以便您可以调试它们（如果打开Chrome控制台，即使没有发布它们，您也会看到TypeScript文件）.

我不认为这是同一个问题，因为我不在浏览器中进行传输。在部署之前，我的

.ts

文件将在一次吞咽任务中传输到

.js

。再看一眼OPI很抱歉我误解了。你说得对：如果在我上次摘录的OP中，我将第167行从

login.component.js.map

更改为完整的URL，Firefox就可以加载地图了！谢谢。这使我可以将问题缩小到：在使用

gulp sourcemaps

时，如何将完整URL分配给

sourceMappingURL

（我目前使用

sourcemaps.write（'.）

来创建外部地图）我还使用

gulp sourcemaps

，我认为它工作得很好（如果您通过TypeScript编译器创建sourcemaps文件，则会得到相同的结果）。我认为这是一个与SystemJs和浏览器有关的问题。我可以通过指示

gulp sourcemaps

在

sourceMappingURL

中写入完整的URL路径来让它工作。我用详细信息更新了OP的底部。

// # sourceMappingURL = [file name].js.map.