TSConfig文件详解21

编译器配置项-compilerOptions

输出相关配置项05

行内源码映射 - inlineSourceMap

设置inlineSourceMap后,TypeScriptWh将源码映射内容嵌入到.js文件中,来替代单独的.js.map文件。虽然这样设置会导致.js文件变大,但是这在某些特殊场景中更方便。 例如,你需要在不允许提供.js.map文件的服务器上调试代码。

这个选项和sourceMap选项互斥。

例如,有如下的TypeScript的代码:

const helloWorld = "hi";
console.log(helloWorld);

可以转换为如下JavaScript代码:

"use strict";
const helloWorld = "hi";
console.log(helloWorld);

然后启用inlineSourceMap进行构建,.js文件底部将包含一条注释,注释中包含该文件的源代码映射。

"use strict";
cons helloWorld = "hi";
console.log(helloWorld);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMifQ==

行内源代码 - inlineSources

设置inlineSources后,原始.ts 文件的内容(source map的sourcesContent属性)将被TypeScript作为嵌入字符串写入源映射中。它的使用场景和 inlineSourceMap使用场景通常一样。

这个选项需要启用 sourceMap或者 inlineSourceMap选项。

例如,有以下TypeScript代码:

const helloWorld = "hi";
console.log(helloWorld);

默认转换为如下JavaScript代码:

"use strict";
const helloWorld = "hi";
console.log(helloWorld);

当启用inlineSourcesinlineSourceMap进行构建,.js文件底部将有一条注释,其中包含该文件的源代码映射。请注意,这个文件结尾的内容与inlineSourceMap的示例不同,因为源代码映射现在包含原始的源代码。

"use strict";
const helloWorld = "hi";
console.log(helloWorld);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBoZWxsb1dvcmxkID0gXCJoaVwiO1xuY29uc29sZS5sb2coaGVsbG9Xb3JsZCk7Il19

映射文件跟路径 - mapRoot

指定调试器定位的映射文件的位置而不是生成的源代码映射文件位置。这里设置字符串将在每个源代码映射中被处理,例如:

{
  "compilerOptions": {
    "sourceMap": true,
    "mapRoot": "https://my-website.com/debug/sourcemaps/"
  }
}

index.ja文件的源代码映射将解释到路径: https://my-website.com/debug/sourcemaps/index.js.map

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容