NPM - 如何使用本地组件文件作为 package

Question

我有一个用React和react-router-dom构建的大项目，几天前我开始使用NextJS ，我发现 NextJS 没有react-router-dom一些功能，所以我写了一个组件文件来做缺少的功能将它与 NextJS 结合起来

这是文件

import { useRouter } from 'next/router'
import Link from 'next/link'

const NavLink = ({ children, activeClassName, ...props }) => {
    const { asPath } = useRouter()
    const childClassName = props.className || ''

    // pages/index.js will be matched via props.href
    // pages/about.js will be matched via props.href
    // pages/[slug].js will be matched via props.as
    const { to, ...rest } = props;
    const className = asPath === props.to ? `${childClassName} ${activeClassName}`.trim() : childClassName

    return (
        <Link {...rest} href={to} passHref={true} className={className}><a>
            {children}
        </a></Link>
    )
}

export default NavLink

我想知道，如何将此文件用作 package 以便避免在本地导入它。

我有很多嵌套组件，这样做真的很浪费时间

有没有办法像这样使用这个文件

import NavLink fron 'my-navlink';

代替

import NavLink fron '../.../components/public/ns/navlink.js';

谢谢

Answer 1

您可以使用 模块路径别名：

只需创建一个 tsconfig.json 或 jsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@my-navlink": ["components/public/ns/navlink.js"]
    }
  }
}

然后在您的页面/组件中的任何位置都可以导入它：

import NavLink fron '@my-navlink';