标签: source-maps

我正在使用 webpack 构建我的应用程序。我生成 3 个包：app.js、vendor.js 和 manifest.js。由于我已将 UglifyJsPlugin 添加到我的 conf 中，因此还生成了 3 个源映射。

我只想为我的 app.js 包生成一个源映射，因为其他 2 个对我来说没有用。有没有办法告诉 uglifier 只为我想要的块生成源映射，而不是全部？

这是我目前拥有的：

                               Asset       Size  Chunks                    Chunk Names
         app.1e1d20f5f417ed9df40d.js     901 kB    1, 2  [emitted]  [big]  app
     app.1e1d20f5f417ed9df40d.js.map    4.24 MB    1, 2  [emitted]         app
    manifest.05867db2f94981c04486.js    1.43 kB       2  [emitted]         manifest
manifest.05867db2f94981c04486.js.map    14.1 kB       2  [emitted]         manifest
     styles.1e1d20f5f417ed9df40d.css    42.3 kB    1, 2  [emitted]         app
 styles.1e1d20f5f417ed9df40d.css.map  108 bytes    1, 2  [emitted]         app
      vendor.2734c5cd65804c943c80.js    1.64 MB    0, 2  [emitted]  [big]  vendor
  vendor.2734c5cd65804c943c80.js.map    11.9 MB    0, 2 …

我正在使用 TypeScript 和 Rollup 的组合，如本文中所示。

因此math.ts

export function square(x: number) {
    return x ** 2;
}

export function cube(x: number) {
    return x ** 3;
}

和main.ts

import { square } from "./math";

console.log(square(3));

命令后生成

tsc -t ES5 -m es2015 && rollup -f es -o app.js -m -i main.js

文件app.js

function square(x) {
    return Math.pow(x, 2);
}

console.log(square(3));
//# sourceMappingURL=app.js.map

但生成的源映射指向 的.js输出tsc，而不是原始.ts文件。我怎样才能得到后者？

给定带有相对路径的 sourceMappingURL 注释//# sourceMappingURL=dep.js.map，我理解这意味着路径是 相对于当前文件的。但是，当我在同一目录中创建一个包含缩小源文件及其源映射的项目时，Chrome 会像这样显示它们：

即使 dep.js 源映射位于额外的子目录下，Chrome 仍然会向我显示源映射的内容。当我右键单击 dep.js 并在新选项卡中打开时，新选项卡中的 URL 无效 - 它包含上述额外的子目录（/scripts/dep/scripts/dep/dep.js 而不是 /scripts/dep/ dep.js）。

sourceMappingURL应该是什么？

假设我有一个使用 Babel 和 Webpack 编译成捆绑包的前端应用程序，其中包含我拥有的代码的源映射。但是，如果我正在寻找与第三方依赖项相关的问题，我只会在浏览器调试器中看到它们的缩小代码，因为这是从 NPM 下载并在磁盘上可用的代码。我只能自动重新格式化这段代码，但永远看不到原来编写的代码。

除了我的代码的源映射之外，是否有任何方法可以配置开发环境以提供依赖项代码的源映射？

我创建了 Angular 7 库，并ng g library @my-org/some-lib在单独的 Angular 应用程序中使用它，以便npm link能够开发应用程序和库。

现在我发现，在开发工具中，我将该库视为my-org-some-lib从 解析的单独捆绑js文件vendor.js.map，但它没有进一步解析到sourceMappingURL=my-org-some-lib.js.map存在于 中的文件my-org-some-lib.js，并且映射文件实际上是在构建的库中生成的。

如果我在开发模式下使用 webpack，当我打开 chrome 开发工具时，在“源”选项卡中，我可以看到一个包含所有源代码的“webpack://”文件夹。

我想知道如何用我自己的代码（没有 webpack）做类似的事情。

假设我想编写自己的构建系统。该构建系统需要一些源代码，然后对其进行转译。如何在特殊文件夹（例如“mysource://”）中显示原始源代码（包括js、html和css文件）？

我使用create-react-app 16 。["react": "^16.8.4", "react-scripts": "^2.1.8"] \n我阅读了Ben Schwarz使用Chrome 开发工具分析 React 性能的博客:\n https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad \n他建议使用source-maps导出你的 JS 。\n当他进行表演时跟踪，然后单击“用户计时”部分中的给定反应组件，特定组件信息显示在“自下而上”部分中，并在右侧带有**指向源代码**的蓝色链接。当我单击 React 组件时，此链接不会显示。当我单击“评估脚本”等组件时，右侧会显示蓝色链接。

源映射不应该在开发中与create-react-app 16一起“开箱即用”吗？\n我只想在开发中使用Chrome 开发工具进行源映射。源映射在 Chrome 浏览器中激活。我错过了什么？\n提前谢谢