如何从不同的 create-react-app 项目本地导入 React 组件？答案

【问题标题】：How to import React component locally from a different create-react-app project?如何从不同的 create-react-app 项目本地导入 React 组件？
【发布时间】：2019-10-29 18:06:29
【问题描述】：

我创建了 2 个 React 应用程序，名为 client 和 admin-client，均使用 create-react-app。

在admin-client中，为了避免代码重复，我想重用一些已经存在于client中的组件。

例如，我在client/src/components/ 目录中有一个Header.jsx 文件，我想在admin-client 中重用它，如下所示：

import React from 'react';

function Header() {
    return (
        <header>
            <h2>Hello World!!</h2>
        </header>
    );
}

export default Header;

这是我尝试过的（但失败了）：

我在admin-client 项目目录中创建了一个.env 文件，如下所示：

NODE_PATH='./../'

（admin和admin-client在同一个父目录中）

然后在admin-client/src/App.jsx里面，我尝试导入Header.jsx如下：

import React from 'react';
import {Header} from 'client/src/components/Header.jsx';

function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

export default App;

但我收到以下错误：

../client/src/components/Header.jsx 5:8
Module parse failed: Unexpected token (5:8)
You may need an appropriate loader to handle this file type.
| function Header() {
|     return (
>         <header>
|             <h2>Hello World!!</h2>

我更喜欢找到不涉及直接处理 Babel 和/或 Webpack 的解决方案，因为这是我首先使用 create-react-app 的原因。

【问题讨论】：

标签： javascript node.js reactjs create-react-app

【解决方案1】：

如果您手动执行，这不是一项简单的任务，您可能最终会对您的存储库进行大量更改，以使其与您的其他应用程序同步。我建议您安装一个名为 Bit 的软件包，它可以让您在项目之间共享和同步 UI 组件。你可以在这里阅读更多信息：https://docs.bit.dev/docs/installation.html

NPM

使用 NPM 安装位：

npm install bit-bin --global

在 Windows 上安装 Bit 时，添加 --no-optional 标志：npm install bit-bin --global --no-optional

【讨论】：

谢谢，我现在可以重用我的 React 组件了。你对重用 SASS 样式有什么建议吗？目前我为每个 React 组件都有一个单独的 .scss 文件。但我只能导出组件，不能导出样式。

【解决方案2】：

您可以将可共享的 React 项目用作其他项目的依赖项，您可以在 package json 依赖项中提及它，并像我们在任何其他节点项目中所做的那样导入。

在这里提到我遇到的一个中等帖子： https://medium.com/@Powderham/sharing-react-components-between-separate-projects-self-hosting-with-git-installing-with-yarn-npm-d3275b64239c

如果这有帮助，请告诉我。

【讨论】：