如何从其他（非项目）目录中将React Components作为程序包/模块导入？

Question

我在文件夹中有几个React Components，这不是React项目。我要遵循的目录结构是：

~/components/Component1/index.jsx

~/components/Component2/index.jsx

现在，我有一个React项目（由构建create-react-app），命名为"myapp"我想将那些React Components作为包或模块导入到我的项目中。

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

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

请帮助我

Answer 1

问题是：

我试图包装iconButton、iconMenu 等Material-ui 组件，以使这些组件易于以编程方式使用。为了将它们放入 git 存储库，我需要一个示例目录，其中包含一个使用我开发的组件的单独的 React 项目。因此，我需要开发一个包来保存组件的定义并将其导出以在其他项目中使用。我想将我的实现保密，因此我什至无法将其发布到 npm.js。

[您可以查看问题陈述以彻底理解问题。]

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

• 通天塔
• babel-cli
• babel 核心
• 巴别塔装载机
• babel-预设-es2015
• babel 预设反应
• babel-预设阶段-2
• html-webpack-插件
• 原始装载机
• 网络包
• webpack-开发服务器

然后是 devDependency

• 反应
• 反应-dom
• 材料-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/'
  }
}

在上面的代码中，在提到输出之后，转译过程的入口、开发工具和输出。我实际上还有另一件事要定义，那就是alias，我用保存组件的目录定义了别名。

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

之后我提到了用于转译和文件格式为 jsx 的加载器，因此它将接受带有JSX Syntax的源。

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

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

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

对于上述解决方案中出现的任何问题，欢迎大家讨论。