如何告诉(webpack)编译器转换依赖项目的tsconfig路径

iyr7buue 于 2023-11-19 发布在 Webpack

关注(0)|答案(1)|浏览(151)

假设有一个monorepo工作区。monorepo有一个应用子工作区（/workspace/app）和一个组件子工作区（/workspace/component）。为了开发启用热模块重载的应用和组件库，在应用子工作区的tsconfig中，我们可以使用路径配置：

{ // /workspace/app/tsconfig.json
  "compilerOptions": {
    "paths": {
      "@lib/component": ["../component"]
    }
  }
}

字符串
现在，在组件子工作区的tsconfig中，可能有其他路径：

{ // /workspace/component/tsconfig.json
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

型
要么/workspace/component/tsconfig.json被webpack忽略，要么路径@/*没有被webpack正确处理，结果是从@/xxx导入的/workspace/component/src中的代码没有被正确理解，因此应用程序无法编译。
当每个子工作区被独立地编译为js时，我知道带有typescript-transform-paths插件的ts-patch能够将@/xxx导入路径转换为相对于子工作区根的正确相对路径。
现在，当直接使用webpack来处理所有这些子组件时，什么是正确的配置来转换它们？
参考/示例：next.js/webpack：https://github.com/belgattitude/nextjs-monorepo-example/discussions/4555

webpack

来源：https://stackoverflow.com/questions/77383657/how-to-tell-webpack-bundler-to-transform-dependent-projects-tsconfig-path

1条答案

按热度按时间

isr3a4wc1#

我写了一个类似于https://github.com/dividab/tsconfig-paths-webpack-plugin/blob/master/src/plugin.ts的webpack插件
它拦截webpack的解析器（内部使用enhanced-resolve），如果根路径是另一个子工作区，它将搜索tsconfig文件，然后解析路径。
要启用：

// next.config.mjs
import { MonorepoResolvePlugin } from './monorepo-resolve-plugin.mjs';
const nextConfig = {
  webpack: (config) => {
    
    // ...other codes
    config.resolve = {
      ...config.resolve,
      plugins: [
        ...config.resolve.plugins,
        new MonorepoResolvePlugin({
          appRoot: process.cwd(),
          workspaceParents: [
            '../../apps',
            '/workspaces/nextjs-monorepo-example/packages/',
          ],
        }),
      ],
    };
  }
};

个字符

展开查看全部

赞(0）回复(0）举报 2023-11-19

我来回答

如何告诉(webpack)编译器转换依赖项目的tsconfig路径

1条答案

相关问题

热门标签

最新问答