Chrome里给编译后的代码关联sourceMap

出于安全的考虑,编译后的线上运行代码不能关联sourceMap、sourceMap也不可以直接从外网访问。

那么,应该如何将编译的sourceMap关联到js文件呢?

什么是sourceMap

sourceMap就是记录了原代码和生成代码之间关系的文件。

例如上图的工程,编译成功后dist/js/目录下会对各个js生成相应的sourceMap

为了不展示sourceMap,我们可以在vue工程的vue.config.js中进行配置,设置sourceMap为hidden-source-map,意为不在js文件中生成sourceMap的link。

1
2
3
4
5
6
7
const devtool = process.env.NODE_ENV === 'production' ? 'hidden-source-map' : undefined;

module.exports = {
configureWebpack: {
devtool,
},
};

给chrome中的js关联相应的sourceMap

思路很简单,请求拦截。

只需要将线上的源代码和sourceMap文件在本地发布(可以使用serve),然后将线上的请求重定向到本地有sourceMap的请求即可。

Requestly

chrome商店中的Requestly插件很好用,下载配置即可。

在插件应用页面可以如下配置(不含map文件的localhost:5000 => 包含map文件的localhost:8080)

注意

如果本地完整文件中js最后没有//# sourceMappingURL=xxx的配置,需要手动添加。

效果

经过上面的配置后,刷新浏览器可以看到类似如图的效果。编译后代码可以看到原始文件了🍻。

其他

对于js文件很多的工程,手动修改一个个js肯定不现实。可以使用下面的node脚本实现(在dist/根目录下执行)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { promisify } = require('util');
const { execSync } = require('child_process');

const glob = promisify(require('glob'));

glob('js/*.js').then(files => {
files.forEach(file => {
const name = file.slice('js/'.length);
execSync(`echo '\n//# sourceMappingURL=${name}.map' >> ${file}`)
console.info(`修改${name}成功`);
})
}).catch(err => {
console.error(err);
});