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

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

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

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

该库是使用 typescript 开发的，因此我使用以下配置使用汇总编译它：

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

因此，源选项卡上既没有包含映射源文件的 src 文件夹，也没有与库对应的任何源文件，但我可以看到浏览器能够检测到 index.esm.js 的源映射文件指向我们描述的现有 index.esm.js.map 但这并不是我真正想要的，而是源映射映射到我之前所说的每个组件。所以我的问题是，为了更轻松地调试组件并使浏览器能够检测到它们，而不是使用现有的 {{1} }?

我试图执行几个工作流但没有成功，比如运行为每个组件生成源映射的 tsc 编译器，但问题是在这个过程中我还需要为使​​用 {{ 1}} 和 index.esm.js 用于此目的，否则我无法启动执行，因为主应用程序无法正确映射资产文件。

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

任何人都可以对这个话题有所了解？

提前致谢！