如何更改 nx 应用程序的 ts 路径别名

Question

我正在将现有应用程序导入 NX monorepo，其文件结构与默认应用程序略有不同。它看起来像这样：

apps
  my-app
    src
      feature-1
      feature-2
      main
        components
          my-component.tsx
        index.tsx
    tsconfig.json

由于所有内容都位于 src/main 内，因此我希望所有绝对导入都从 src/main 开始。

// src/main/index.tsx
import MyComponent from 'components/my-component'

哪个应该解决src/main/components/my-component。显然，我绝对可以导入这个特定的示例，但实际的应用程序是一个巨大的应用程序，这不是一个可行的解决方案。

在这个原始的单一应用程序存储库中，我们通过paths在内部设置来实现这一点tsconfig

// tsconfig.json
{
  "compilerOptions": {
     ...     
     "paths": {
       "*": ["src/main/*", "node_modules/*"]
     }
  }
}

但是，由于 NX 的根 tsconfig 使用路径映射到库，因此这不再是有效的解决方案。我如何告诉 NX 解决我的导入问题，src/main而不是src？

我尝试在我的 webpack 配置中进行设置resolve.modules，path.resolve(__dirname, 'src/main')但似乎不起作用。我还尝试baseUrl在应用程序的 tsconfig 中进行设置，但这会消除我导入库的能力。

Answer 1

Nx 应该在工作空间根目录中创建一个 tsconfig.base.json 文件，其中包含库的所有路径声明。

选项1

我认为“Nx”是从应用程序代码中生成一个或多个库的首选方法。换句话说，将src/main目录移出apps/my-app/或移入libs/main/or libs/my-app/main/。Nx 团队建议 99% 的代码应该存在于库中，即使它是特定于应用程序的。这样您就可以独立于应用程序对其进行测试。

选项2

但是，如果您不想花时间将代码划分为库，您可以通过指定以下方式走捷径：

// tsconfig.base.json
{
  "compilerOptions": {
     ...     
     "paths": {
       "main/*": ["apps/my-app/src/main/*"]
     }
  }
}

您必须预先考虑main/所有导入，但这通过查找和替换应该相当容易。

选项3（推测，未经测试）

您也许可以使用与以前相同的技术，但指定工作空间根目录的路径：

// tsconfig.base.json
{
  "compilerOptions": {
     ...     
     "paths": {
       "*": ["apps/my-app/src/main/*"]
     }
  }
}

选项4（推测，未经测试）

您也许可以使用应用程序目录中的 tsconfig.json 文件覆盖 tsconfig.base.json 文件中的路径：

// tsconfig.json
{
  "compilerOptions": {
     ...     
     "paths": {
       "*": ["src/main/*", "node_modules/*"]
     }
  }
}

这可能会也可能不会导致失去导入其他库的能力。我想这取决于 tsconfig 文件如何合并。