创建自定义反应包库

Question

我是第一次尝试创建一个库包，但是我运行遇到了一个问题，虽然一切都编译得很好，但在加载页面时它说找不到我的模块我库中的组件。

在我的库项目中，我有以下目录结构

在我的 SayHello.jsx 文件中，我有以下内容：

import * as React from 'react';

const SayHello = (props) => {
    return (
        <h1>Hello ${props.name}</h1>
    )
}

export {SayHello}

在我的 babel.config.js 中，我有以下内容：

{
    "presets": [
     [
      "@babel/env",
       {
        "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
         },
      "useBuiltIns": "usage",
      "corejs": "3.6.5"
       }
   ],
      "@babel/preset-react"
   ]
   }

在我使用这个库的主要应用程序中，我已将项目添加到 NPM（从 GitHub 托管它，而不是 NPM 包管理器作为它的私有库）

我将组件导入我的主应用程序并按如下方式使用它：

import SayHello from 'devso-react-library'
...

<SayHello name={'chris'} />

在 lib 目录中的 index.js 中，我有以下内容：

import SayHello from "./components/SayHello";

export {
    SayHello
}

VS Code 中的所有内容似乎都暗示它可以找到所有内容，但是当我转到该页面时，出现以下错误：

./node_modules/devso-react-library/dist/index.js:13:0
Module not found: Can't resolve '../../lib/component/SayHello'

Import trace for requested module:
./pages/products-and-services.tsx

https://nextjs.org/docs/messages/module-not-found

pages/products-and-services.tsx如下：

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useState } from 'react'
import ContentWrapper from '../components/StandardComponents/ContentWrapper'
import Footer from '../components/StandardComponents/Footer'
import TopNav from '../components/StandardComponents/TopNav'
import SayHello from 'devso-react-library'

const Home: NextPage = () => {




  return (
    <div className='flex flex-col h-screen'>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <TopNav />

      <ContentWrapper>
        <button>Show Modal</button>

        <SayHello name={'chris'} />

      </ContentWrapper>
      <Footer />
    </div>
  )
}

export default Home

我不明白为什么它在 lib/component 而不是 lib/component 中查找，如果需要包含任何其他文件请告诉我，第一次尝试这个所以我想已经包含所有相关内容。

这是一个作为主要应用程序的 NextJS 项目，但库使用 create-react-app 作为模板。

更新

我已经尝试按照评论中的建议更改从 import SayHello from "devso-react-library' to import { SayHello } from "devso-react-library" 的导入，但现在我得到了一个不同的错误，如下所示：

/node_modules/devso-react-library/dist/components/SayHello.js:3:0 Module not found: Can't resolve 'core-js/modules/web.dom-collections.iterator.js

Answer 1

我似乎已经开始工作了，尽管看起来不太正确。我必须将 core-js 安装到库包中，然后将导入更改为 dist 文件夹中我想要的组件的路径，例如

import { SayHello} from 'devso-react-library/dist/components/SayHello'

Answer 2

Post 你的 package.json 并检查你是否有这样的东西指向你的类型。

为了快速测试，我建议您使用 link。

在你的图书馆做（用纱线）：

纱线link
纱线安装
cd node_modules/react
纱线link
cd node_modules/react-dom
纱线link

那么在项目中你需要用到这个库

纱线link反应
yarn link react-dom
纱线link

Answer 3

您没有将组件作为默认值导出，但在 index.js 中您正在作为默认值导入。

您可以避免从 index.js 导入和导出的额外步骤。您可以直接导出组件而无需将它们导入 index.js

// Component
import * as React from 'react';
export const SayHello = (props) => {
    return (
        <h1>Hello ${props.name}</h1>
    )
}

// index.js
export * from "./components/SayHello";
     OR
export { SayHello } from "./components/SayHello";

创建自定义反应包库

Creating custom react package library

package

reactjs

next.js