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配置中使用了这个插件。

关于这个插件的更多信息可以查看here。

Answer 3

根据doc。

无需额外库即可设置模块映射

在你的文件结构中，试试这个例子。

// tsconfig.json 

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "~*": ["./*]
    }
  }
}

然后转到您的文件：

import { xxx } from '~/components';

// or

import xxx from '~/components/xxx';

NextJS 在导入路径中定义波浪号“~”符号的位置？

NextJS where defines tilde '~' symbol in import path?

javascript

reactjs

webpack

next.js