Reactjs 如何使用公共组件创建本地react库项目，并在本地导入该项目

我正在尝试设置一个

commonreact

react项目。我运行了

create react app

，然后创建了src文件夹，在该文件夹下有一个子文件夹

container

。我有一个文件

DefaultEnums.js

import React from 'react'

const IS_RECORD_ACTIVE = {     
    UNKNOWN:"UNKNOWN", 
    UNSPECIFIED:"UNSPECIFIED", 
    Active:"Active",
    Inactive:"Inactive",
    Draft:"Draft", 
    Publish:"Publish", 
    Unpublish:"Unpublish" 
}

export default IS_RECORD_ACTIVE ;

现在我已经设置了另一个react项目

my-project\u A

和

my-project\u B

。我想在这两个项目中都使用

IS\u RECORD\u ACTIVE

。我怎么做

我需要了解如何在其他项目中导入

commonreact

，然后使用变量

---

我正在学习React，这就是一个愚蠢的问题。

一个解决方案是创建一个模块，然后通过将该模块与每个项目链接，将其导入项目中

A]创建模块

创建目录：

myu模块

进入创建的目录：

cd my\u模块

将此目录转换为节点模块：

npm init

如果尚未安装，请安装：

curl-sShttps://dl.yarnpkg.com/debian/pubkey.gpg |sudoapt键添加-
回声“黛布https://dl.yarnpkg.com/debian/ 稳定主“sudo T/etc/apt/sources.list.d/warn.list
sudoapt更新
sudo易于安装纱线

添加依赖项：

纱线添加@babel/cli@babel/core
纱线添加@babel/预设环境@babel/预设反应
触摸，巴别塔

将预设添加到.babelrc文件：

{
“预设”：[“@babel/preset react”、“@babel/preset env”]
}

创建源目录：

mkdir src
cd src
touch index.js

在src/index.js中添加您想要的任何代码

import React from 'react';

const DummyComponent = () => (
  <div>This is my module </div>
)

export default DummyComponent;

将build命令添加到package.json，这样您就不必反复键入它：

{
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“构建”：“../node\u modules/.bin/babel src--out file index.js”
},
}

注意：每当您想传输组件时，只需运行：

纱线构建

添加react&react dom作为peerDependencies。因此，在package.json中，在“devdependences”之前添加：

现在安装react&react dom:

纱线添加react-react dom

获取模块的路径（执行：

pwd

）。此命令将返回模块路径，类似于“/home/user\u name/…/my\u module”

B]创建要使用模块的ReactJS应用程序：

执行

cd..

检查是否安装了NodeJ（您需要：Node ^10.12.0 | |>=12.0.0或更高版本）：

npm当前节点-v

如果节点有问题，请执行：

sudo mv/usr/local/bin/node/usr/local/bin/node.save

创建ReactJS应用程序：

创建my-project\u a

进入新创建的项目：

cd my-project\u A

添加您的模块（从步骤13获得的路径）：

添加我的模块路径

do:

纱线开始

在App.js中导入模块：

从“我的模块”导入我的模块
函数App（）{
返回(
);
}    
导出默认应用程序；

有两种方法可供选择：

手动设置

使用

创建反应库

我将与您分享这两种方法的参考链接

参考链接：

我希望这能有所帮助。

---

看起来你正在做一个很棒的项目

CRA不用于构建组件库，请为该组件库设置一个构建脚本，例如rollup。然后，Thread/npm将该库链接到本地开发人员的CRA应用程序中。如果您让library one以监视模式运行，它将接收更改。我建议您使用Lerna（monorepo），它将帮助您轻松管理软件包版本，并在您刚更新的软件包和另一个正在使用它的软件包之间同步您所做的更新，它非常强大，我会尝试一下，然后再报告。非常感谢

"peerDependencies": {
  "react": "^16.6.1",
  "react-dom": "^16.6.3" },

  import MyModule from 'my_module'  
  function App() {
    return (
      <div className="App">
        <MyModule />
      </div>
    );
  }    
export default App;