javascript NextJS在导入路径中定义了“~”符号？

xfb7svmp 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(112)

我用NextJS读了一个应用程序的代码。它导入组件，如import Head from '~/components/layout/head'
项目结构：

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

我想知道在哪里定义~作为nextJS中的根目录。
我在哪里可以找到这个的配置？尝试打开下一个包中的webpack配置，但没有找到。

3条答案

使用Typescript的paths特性，您可以指定一个模块Map。

// tsconfig.json

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

这将允许您使用

import x from '~/components/layout/head';

将Map到src/components/layout/head。
如果您使用的是webpack，则需要使用tsconfig-paths-webpack-plugin。

根据doc。
您可以设置模块Map而无需额外的库。
在您的文件结构中，尝试以下示例。

// tsconfig.json 

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

然后转到您的文件：

import { xxx } from '~/components';

// or

import xxx from '~/components/xxx';

我发现这是因为babel插件babel-plugin-root-import，因为项目在babel config中使用了这个插件。
更多关于这个插件可以检查here .