具有多个“@/”路径别名的Monorepo-可在TypeScript中工作,但不能在Webpack编译器中工作

wztqucjr  于 2023-03-04  发布在  TypeScript
关注(0)|答案(1)|浏览(243)

我认为这是不可能的,但值得一问,因为我不是网络包Maven!
我们有一个monorepo,里面有很多不同的workspace包,使用typescript,使用webpack构建。
每个工作区都有自己的tsconfig.jsonwebpack.config.js来构建该包。
为每个路径声明路径别名,如@package-a@package-b等。
有些包是从它们自己的独立repo导入的,并声明@为自己的别名。
这意味着我们在不同的包中有多个@别名。
ts配置

"paths": {
      "@/*": ["./src/*"],
      "@pacakge-a/*": ["./src/*"],
      "@pacakge-b/*": ["../package-b/src/*"],
      "@package-c/*": ["../package-c/src/*"]
}

所以在代码中你可以导入

import { Thing } from '@/data/models/Thing';
import { stuff, in, other, package } from '@package-c/otherThings';

但是,这是可行的,因为每个都有一个本地tsconfig.js文件,该文件似乎在包级别工作。
这个问题出现在编译时,当我们有跨包依赖关系时--两个文件都使用本地别名@--编译器不知道使用哪个。
Webpack有自己的生成别名

resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src/'),
      "@pacakge-a/*": path.resolve(__dirname, 'src/'),
      "@pacakge-b": path.resolve(__dirname, '../pacakge-b/src/'),
      "@pacakge-c": path.resolve(__dirname, '../pacakge-c/src/')
    },
  }

但显然在构建时,只有一个webpack配置用于该packakge。
有什么办法可以解决这个问题吗?或者我们只需要将所有的@/*引用重命名为它们自己的包名?

fruv7luv

fruv7luv1#

您已经建立了一个多项目项目。有许多工具可以处理这些项目:“Yarn工作区”、“Npm工作区”和Lerna
Lerna是一个管理包含多个包的JavaScript项目的工具,Lerna管理monorepos,它可以在自己内部保存包含多个包的项目。
我以前和Lerna合作过,你可以用

lerna init

这将创建“packages”目录和和lerna.json文件.你添加你的webpack项目,“package1,pacakge2”到这packages目录.如果你想要到链接packages:

// setting package1 as package2 dependencies 
lerna add package1 --scope=package2

您可以在package.json中检查package2的依赖项。如果您使用Lerna,用户必须在其计算机中安装Lerna cli工具才能启动项目

相关问题