webpack - 避免源映射中依赖于 monorepo 中其他包的相对路径

Question

使用Lerna在 monorepo 中构建包时，应如何配置 webpack 以确保内部 monorepro、跨包依赖项将发出指向安装位置（例如./node_modules/@foo/bar/lib/foobar.js）的源映射，而不是指向本地文件夹的相对路径包是在哪里构建的（例如../bar/lib/foobar.js）？后一个文件夹在运行时不存在，这会破坏 Chrome 或 VSCode 中的调试。

背景：我使用amplify-js图书馆。它的源图被破坏了，这使得调试很痛苦。我想建立一个 PR 来修复这个库的源映射，但我不确定需要进行哪些更改。

问题在于，为内部 monorepo 依赖项生成的源映射包含构建时位置的相对路径，例如webpack:///../core/lib/index.js. 但是amplify-js从 npm 安装时，只有根包直接安装在node_modulesat下node_modules/amplify-js。monorepo 中的其他依赖包（例如包core）安装在. 这使得源映射中的路径在运行时失败，因为不存在。@aws-amplify/node_modules/@aws-amplify/corewebpack:///../core/lib/index.js../core

这是有问题的源地图的摘录（ https://unpkg.com/aws-amplify@1.1.22/dist/aws-amplify.js.map）。为了清楚起见，我对其进行了格式化：

{
  "version":3,
  "sources:[
    "webpack:///webpack/universalModuleDefinition",
    "webpack:///aws-amplify.js",
    "webpack:///webpack/bootstrap 02623d179e36bcc68243",
    "webpack:////root/app/node_modules/aws-sdk/lib/core.js",
    "webpack:///../core/lib/index.js",  // PROBLEM!!!!
    "webpack:////root/app/node_modules/graphql/module/error/index.js",

应该如何配置 webpack（或 Lerna？或其他东西？）以确保内部 monorepo 依赖项的源映射始终指向将在运行时安装这些依赖项的 node_modules 文件夹？

使用上面的摘录，这是我希望看到的：

{
  "version":3,
  "sources:[
    "webpack:///webpack/universalModuleDefinition",
    "webpack:///aws-amplify.js",
    "webpack:///webpack/bootstrap 02623d179e36bcc68243",
    "webpack:////root/app/node_modules/aws-sdk/lib/core.js",
    "webpack:////root/app/node_modules/@aws-amplify/core/lib/index.js",  // OK
    "webpack:////root/app/node_modules/graphql/module/error/index.js",

如果你想重现问题：

• git 克隆https://github.com/aws-amplify/amplify-js.git
• cd放大-js
• 纱
• 纱线引导
• 纱线构建 （警告，这需要几分钟）
• 打开./packages/aws-amplify/dist/aws-amplify.js.map

预期：没有到其他包的相对路径

实际：相对路径，如"webpack:///../core/lib/index.js"

标签： webpacksource-mapsaws-amplifylernamonorepo