我用NextJS读了一个应用程序的代码。它导入组件,如import Head from '~/components/layout/head'项目结构:
import Head from '~/components/layout/head'
-app ---components ---pages ---public
我想知道在哪里定义~作为nextJS中的根目录。我在哪里可以找到这个的配置?尝试打开下一个包中的webpack配置,但没有找到。
~
cuxqih211#
使用Typescript的paths特性,您可以指定一个模块Map。
paths
// tsconfig.json { "compilerOptions": { ... "baseUrl": "./", "paths": { "~/*": ["./src/*"] } ... } }
这将允许您使用
import x from '~/components/layout/head';
将Map到src/components/layout/head。如果您使用的是webpack,则需要使用tsconfig-paths-webpack-plugin。
src/components/layout/head
tsconfig-paths-webpack-plugin
yhqotfr82#
根据doc。您可以设置模块Map而无需额外的库。在您的文件结构中,尝试以下示例。
// tsconfig.json { "compilerOptions": { ... "baseUrl": ".", "paths": { "~*": ["./*] } } }
然后转到您的文件:
import { xxx } from '~/components'; // or import xxx from '~/components/xxx';
uinbv5nw3#
我发现这是因为babel插件babel-plugin-root-import,因为项目在babel config中使用了这个插件。更多关于这个插件可以检查here .
babel-plugin-root-import
3条答案
按热度按时间cuxqih211#
使用Typescript的
paths
特性,您可以指定一个模块Map。这将允许您使用
将Map到
src/components/layout/head
。如果您使用的是webpack,则需要使用
tsconfig-paths-webpack-plugin
。yhqotfr82#
根据doc。
您可以设置模块Map而无需额外的库。
在您的文件结构中,尝试以下示例。
然后转到您的文件:
uinbv5nw3#
我发现这是因为babel插件
babel-plugin-root-import
,因为项目在babel config中使用了这个插件。更多关于这个插件可以检查here .