如何在主项目中调试使用 Rollup 编译的 Typescript 库

Question

我花了一些时间试图找出以下场景：

我有两个项目，一个是组件库，另一个是使用该库的主项目。当我开发一个新组件时，我会像往常一样遵循 TDD 流程，最后我在故事书中做了一些案例场景，我希望该组件在某些情况下会表现出来，但是，一件事是理想的行为，另一件事是如何真实集成环境中的功能。对于这种情况，我一直在尝试构建库的源映射，以便在主项目上运行时在本地调试它。

该库是用打字稿开发的，因此我使用以下配置通过汇总来编译它：

rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "@rollup/plugin-image";
import babel from "rollup-plugin-babel";
const cssUrl = require("postcss-url");

const packageJson = require("./package.json");

const GLOBALS = {
  react: "React",
  "react-dom": "ReactDOM",
  loadash: "lodash"
};

const isDev = process.env.NODE_ENV === "development";

export default {
  input: "src/index.ts",
  external: Object.keys(GLOBALS),
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
      // globals: global variable names of external dependencies
      globals: GLOBALS
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
      // globals: global variable names of external dependencies
      globals: GLOBALS
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    babel({
      exclude: "node_modules/**",
      plugins: ["external-helpers"]
    }),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss({
      modules: false,
      extract: true,
      sourceMap: true,
      minimize: isDev ? false : true,
      plugins: [cssUrl({ url: "inline" })]
    }),
    image()
  ]
};

当我执行它时npm run build，它会生成 ESM 和 CommonJS 的编译包，我可以直接通过 **index.esm.js" 文件进行调试，但是当生成代码的编译版本时，设置断点并执行操作会更难调试它使用丑陋且精简的代码版本进行检查，所以我想知道是否可以利用源映射文件来解决这个问题。对于根项目，它的工作方式就像一个魅力，但是当它在生成的代码中使用它时图书馆我没能成功。

这是生成的dist文件夹：

index.esm.js文件包含为每个组件编译的所有代码，底部有以下行：

//# sourceMappingURL=index.esm.js.map

指出源映射对应于index.esm.js.map. 在这个文件中，有一个映射源文件数组，指向库内的许多组件，所有这些文件都以 so 为前缀，只要../src/elements/<component_name>文件设置在相对映射上，index.esm.js.map即node_modules/library-components/src/elements/...浏览器应该能够正确映射这些组件文件，但情况并非如此，因为每次启动应用程序时，我都会在“源”选项卡上看到以下内容：

因此，带有映射源文件的 src 文件夹或与库对应的任何源文件在“源”选项卡上都不可用，但我可以看到浏览器能够检测到指向index.esm.js我们index.esm.js.map描述的现有文件的源映射文件，但是这不是我真正想要的，但正如我之前所说，源映射映射到每个组件。所以我的问题是，是否可以使用 rollup 进行编译，以清晰的方式生成包含每个组件的源映射的捆绑包，以便更轻松地调试组件，并使浏览器能够检测到它们，而不是使用现有的index.esm.js？

我试图执行几个工作流程，但没有成功，例如运行为每个组件生成源映射的 tsc 编译器，但问题是，在这个过程中，我还需要为 rollup 使用的资产生成捆绑包，postcss并images为此目的，否则我无法启动执行，因为主应用程序无法正确映射资产文件。

我不知道最后我是否在这个主题中很好地解释了自己，但我认为对于那些使用多个项目而不是单一存储库并且需要不断测试并寻找集成环境中的潜在错误的人来说，这是一个非常常见的场景第三方库内的组件。

任何人都可以阐明这个主题吗？

提前致谢！