Next.js高级特性:导入和模块路径别名

从Next.js 9.4开始, Next.js自动支持tsconfig.jsonandjsconfig.json "paths""baseUrl"options 。

注意:jsconfig.json不使用TypeScript时可以使用

这些选项允许您配置模块别名,例如,常见模式是对某些目录使用别名以使用绝对路径。

这些选项的一个有用功能是将它们自动集成到某些编辑器中,例如vscode。

baseUrl配置选项可以让你直接从项目的根目录导入。

此配置的示例:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
// pages/index.js
import Button from 'components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

尽管baseUrl这很有用,但您可能想添加其他与1不匹配1的别名。为此TypeScript提供了"paths"选项。

使用"paths"允许您配置模块别名。例如@/components/*components/*

此配置的示例:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
// components/button.js
export default function Button() {
  return <button>Click me</button>
}
// pages/index.js
import Button from '@/components/button'

export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2438.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午2:54
下一篇 2021年4月20日 下午3:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注