NextJS在导入路径中定义代字号“〜”的地方？

Question

我使用NextJS在应用程序中阅读代码。它将导入import Head from '~/components/layout/head'

之类的组件

项目结构：

-app
---components
---pages
---public

我想知道在nextJS中哪里将~定义为根目录。

在哪里可以找到它的配置？ 尝试发现下一个软件包中的webpack配置，但是没有找到。

Answer 1

使用Typescript的paths功能，您可以指定模块映射。

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@anything/utils/*": ["app/utils/*"],
      "@anything/pipes/*": ["app/pipes/*"]
    }
    ...
  }
}

这将允许您使用导入

import x from '@anything/utils/dateToNum';

将被映射到app/utils/dateToNum。

如果您使用的是webpack，则需要使用tsconfig-paths-webpack-plugin。

Answer 2

我发现这是因为babel插件babel-plugin-root-import，因为项目在babel config中使用了该插件。

有关此插件的更多信息，请查看here。