source-map-loader 在哪里适合使用 Webpack 进行 TypeScript 编译？

Posted 2023-03-13

【中文标题】source-map-loader 在哪里适合使用 Webpack 进行 TypeScript 编译？

【英文标题】：Where does source-map-loader fit into TypeScript compilation with Webpack?

【发布时间】：2018-12-14 05:21:35

【问题描述】：

我正在将 TypeScript 添加到当前全 javascript Web 应用程序的构建过程中，该应用程序的构建过程围绕 Webpack 构建。我一直在关注 TypeScript 的 Migrating from JavaScript 文章，并且对建议的 Webpack 配置有疑问¹，为方便起见，复制如下：

module.exports = 
    entry: "./src/index.ts",
    output: 
        filename: "./dist/bundle.js",
    ,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: 
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    ,

    module: 
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
             test: /\.tsx?$/, loader: "awesome-typescript-loader" 
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
             test: /\.js$/, loader: "source-map-loader" 
        ]
    ,

    // Other options...
;

awesome-typescript-loader 的存在当然是必需的——毕竟我们想要编译 TypeScript。我的问题是关于source-map-loader，这里用作预加载器。这篇文章的目的非常简洁，只说：

您可以使用 awesome-typescript-loader，一个 TypeScript 加载器，结合 source-map-loader 以便于调试。

Another article 只添加了一点额外信息：

这两个依赖项都可以让 TypeScript 和 Webpack 很好地协同工作。 awesome-typescript-loader 帮助 Webpack 使用名为 tsconfig.json 的 TypeScript 标准配置文件编译您的 TypeScript 代码。 source-map-loader 使用 TypeScript 的任何 sourcemap 输出来通知 webpack 在生成自己的 sourcemap 时。这将允许您像调试原始 TypeScript 源代码一样调试最终输出文件。

最后，source-map-loader's own README 说：

source-map-loader extracts 来自所有 JavaScript 条目的现有源映射。这包括内联源映射以及通过 URL 链接的源映射。所有源地图数据都将根据webpack.config.js 中的 devtool 选项指定的选定源地图样式传递给 webpack 进行处理。

好的。所以source-map-loader 摄取源映射并将它们提供给 Webpack。不过，我的问题是，为什么它应该作为预加载器运行？根据上面的第二个引用，听起来source-map-loader 应该从 TypeScript 获取源映射输出。不过，如果它作为预加载器运行，it runs before normal loaders，我不明白它如何使用 TypeScript 的输出。

此外，我的印象是 Webpack 不处理中间文件——在配置中，source-map-loader 只加载 .jsx? 文件。这不是说 source-map-loader 根本不会在 TypeScript 编译的结果上被调用吗？

---

1：请注意，此 Webpack 配置使用过时的语法，在 module.loaders 部分列出普通加载器，在 module.preLoaders 部分列出预加载器。这不会影响此问题的内容，同一站点的similar article 上提供了具有当前语法的示例。

【问题讨论】：

等待答案。我有同样的困惑，但我使用的是 ES6 Javascript 而不是打字稿。

同样，在网上找不到任何解释这一点的地方。我不明白为什么它应该是一个预加载器，如果它是一个后加载器更有意义：因为它说它正在处理来自打字稿的源映射输出。

我认为答案是不需要 source-map-loader，至少在通用 Typescript 项目中不需要。我在 node.js 中使用它来获取合理的堆栈跟踪等，但在网页包。在浏览器中运行代码时，它会解析源映射并进行映射。

有趣。如果您能找到该假设的证据，请发布答案！

@jørgen-tvedt，我也有类似的怀疑，即不需要“source-map-loader”。我确实玩过 ts+webpack 设置而不使用它 (github.com/ApolloTang/webpack4-babel7-ts3-w-babel-loader)。它似乎工作得很好；然而，这是一个使用 @babel/typescript thou 的 babel@7 设置。

【参考方案1】：

它与 TypeScript 编译本身没有任何关系，并且您不需要它来获取源映射以用于您自己的源。但是，您可能出于以下原因需要它，正如您从source-map-loader 的自述文件中引用的那段之后的段落中所述：

当使用具有自己的源映射的 3rd 方库时，此加载器特别有用。如果没有提取并处理到 webpack 包的 source map 中，浏览器可能会误解 source map 数据。 source-map-loader 允许 webpack 跨库维护源映射数据的连续性，从而保持调试的便利性。

它是预加载器的原因是因为它必须在 .js 文件被缩小之前运行，因为这往往会删除内联源映射。由于它只对 .js 文件而不是 .ts 文件作出反应，因此它不会在您的 TypeScript 文件被转译之前运行，而是在它们被输出到 .js 文件之后立即运行。