Question

我可以使用webpack和ts-loader将TypeScript编译为具有全局命名空间的单个包并生成源映射。

但是，源地图位于源代码所在的./src下。

我想要做的是将该位置更改为<my global namespace / module name>，因为目前，当使用应用程序加载多个模块时，它无用。

例如，我创建的module-a包含./src/foo.ts和./src/boo.ts。我还创建了module-b，其中包含./src/pak.ts和./src/boo.ts

构建软件包时，我会在window.ModuleA和window.ModuleB下公开它们。代码工作，但源映射搞砸了，因为它们都有一个指向./src/boo.ts的文件。

如果我可以配置指向module-a或module-a/*的{{1}}源地图，那会更好。

这是我的webpack配置：

ModuleA/*

和tsconfig.json：

'use strict';
const path = require('path')

module.exports = {
  devtool: 'inline-source-map',

  entry: {
    'module-a': './src/index'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'module-a.js',
    library: 'ModuleA',
    libraryTarget: 'var'
  },
  resolve: {
    extensions: ['', '.ts', '.tsx', '.js']
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ],
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [
          path.join(__dirname, 'src')
        ]
      }
    ]
  },
  ts: {
    configFileName: 'tsconfig.json'
  }
}

Answer 1

我目前的解决方案是使用compilerOptions.sourceRoot。

它会将./src替换为您想要的任何内容。

但是，webpack / ts-loader会在其后生成一条额外的路径。

例如，

在module-a/src/foo.js.map中，sourceRoot正确module-a。

但是，在捆绑后，./dist/module-a.js的源地图引用为module-a/C:\Users\<user>\...\module-a\src。

我不知道是否应该在webpack或ts-loader（最有可能webpack）上提交问题，但至少现在每个模块的源地图都是在一个不同的文件夹。

更新：上述问题已修复。这是一个有效的解决方案。

如何配置typescript sourcemap文件夹

1 个答案: