创建自定义反应包库答案

【问题标题】：Creating custom react package library创建自定义反应包库
【发布时间】：2022-01-16 11:57:15
【问题描述】：

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

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

在我的 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/components 中查找，如果需要包含任何其他文件，请告诉我，第一次尝试这个，所以认为我已经包含了所有相关内容。

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

更新

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

/node_modules/devso-react-library/dist/components/SayHello.js:3:0 未找到模块：无法解析 'core-js/modules/web.dom-collections.iterator.js

【问题讨论】：

SayHello 被导出为命名导出，您也应该这样导入。
你的意思是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'

标签： reactjs next.js package

【解决方案1】：

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

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

【讨论】：

您可以通过将库的 json 包中的 main 字段设置为 dist/index.js 来避免这种情况，但还要确保从顶级 index.js 文件中导出所有组件。但是，请记住，这意味着您将在导入时加载整个库。如果要拆分，需要在package.json中使用exports

【解决方案2】：

发布你的 package.json 并检查你是否有类似的东西指向你的类型。

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

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

纱线链接
纱线安装
cd node_modules/react
纱线链接
cd node_modules/react-dom
纱线链接

然后在项目中你需要用到库

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

【讨论】：

【解决方案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";

【讨论】：