如何配置打字稿源文件夾文件夾

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/*或ModuleA/*會更好。

這裏是我的WebPack配置：

'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' 
    } 
} 

而且tsconfig.json：

{ 
    "compilerOptions": { 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
     "es2015", 
     "es2015.reflect", 
     "dom" 
    ], 
    "declaration": false, 
    "inlineSources": true, 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "newLine": "LF", 
    "noImplicitAny": false, 
    "removeComments": true, 
    "sourceMap": true, 
    "strictNullChecks": true, 
    "target": "es5" 
    }, 
    "files": [ 
    "src/index.ts" 
    ], 
    "include": [ 
    "typings/index.d.ts" 
    ] 
} 

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）提出申請，但至少現在每個模塊的源映射下不同的文件夾進行組織。

更新：上述問題已修復。這是一個可行的解決方案。