如何从其他（非项目）目录将 React 组件作为包/模块导入？

Posted 2023-03-07

【中文标题】如何从其他（非项目）目录将 React 组件作为包/模块导入？

【英文标题】：How can I import React Components as a package/module from some other(non-project) directory?

【发布时间】：2018-02-24 06:46:08

【问题描述】：

我在一个文件夹中有几个 React 组件，这不是一个反应项目。我为组件遵循的目录结构是：

~/components/Component1/index.jsx

~/components/Component2/index.jsx

现在我有一个名为 "myapp" 的 React 项目（使用 create-react-app 构建）我想将这些 React 组件作为包或模块导入我的项目中。

我尝试在 package.json 中提及依赖项，但出现错误，因为我无法在 package.json 中提及绝对路径。

我不想将这些组件作为 npm 包发布。

请帮我解决这个问题

【问题讨论】：

您是否尝试过在项目中复制组件并使用它们？在package.json 文件中不使用 as 模块

这样我就没有需要的包了，发生这种情况的主要目的是，我想在任何项目之外制作一个包，我可以在任何项目中使用它从它所在的地方导入它

【参考方案1】：

我知道答案可能听起来很基础，但你有什么理由不直接将组件复制粘贴到新应用中，然后将它们用作任何其他组件？

【讨论】：

这样我就没有需要的包了，发生这种情况的主要目的是，我想在任何项目之外制作一个包，我可以在任何项目中使用它从它所在的地方导入它。

我看到在这种情况下，您可以将包上传到 git 中的私有仓库，然后使用其 URL 安装包。是否有意义？那么你可以

对不起，我无意中发布了。我是说：那么你可以在几个项目中安装包

但是从具有几个文件夹（非项目）的 git 存储库到 PACKAGE 的转换仍然不清楚。而且我不能使用 package.json 中的 URL 作为依赖项。

您可以使用 git repo 的 URL 来安装包。您可以在此处找到示例：***.com/a/28729646/1644478。要将您的文件夹转换为一个包，您需要按照以下链接中描述的步骤操作：docs.npmjs.com/getting-started/creating-node-modules。让我知道它是否有帮助，否则我会尝试为您找到更好的链接

【参考方案2】：

问题是：

我试图包装 material-ui 组件，如 iconButton、iconMenu 等，以使组件易于以编程方式使用。要将它们放入 git 存储库，我需要一个示例目录，其中包含使用我开发的组件的单独反应项目。所以，我需要开发一个包来保存组件的定义并将它们导出以用于其他项目。我想保持我的实现私有，所以我什至不能将它发布到 npm.js。

[你可以看问题陈述来彻底理解thr ptblem。]

解决方案帮助我完成所需的工作，我创建了一个新项目，其中添加了最少的依赖项。即

巴别塔 babel-cli 巴别塔核心 babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 html-webpack-plugin 原始加载器 网页包 webpack-dev-server

然后是 devDependencies

反应 反应域 material-ui [偶尔]

安装后，[这里是部分]我用以下脚本创建了一个 webpack.config.js：

const path = require('path')
const webpack = require('webpack')

module.exports = 
  devtool: 'cheap-eval-source-map',
  entry: './docs/entry.js',
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  ,
  resolve: 
    alias: 
      genericcomponents: path.join(__dirname, 'src')
    
  ,
  module: 
    loaders: [
      
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      
    ]
  ,
  devServer: 
    contentBase: 'docs/'
  

在上面的代码中，提到了转译过程的entry、devtool和output的输出后.我其实还有一个东西要定义，就是alias，我用存放组件的目录定义了别名。

现在这个包将包含我在别名参数中提供的名称的所有组件。

之后我提到了 transpilation 的加载器和 jsx 的文件格式，因此它将接受具有 JSX 语法的源。

最后我提到了我放置 index.html 和 entry.js 文件的目录。

以下是我项目的目录结构：

我的 App.jsx 组件在 docs 文件夹 中。现在可以通过提供包名称来导入components文件夹中的任何组件。

欢迎您讨论上述解决方案中出现的任何问题。