Question

我在一个文件夹中有几个React组件，它不是反应项目。我关注组件的目录结构是：

~/components/Component1/index.jsx

~/components/Component2/index.jsx

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

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

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

请帮助我

Answer 1

我知道答案可能听起来非常基本，但是有什么理由说你不能将组件粘贴到新的应用程序中，只是将它们用作任何其他组件？

Answer 2

问题是：

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

[你可以看到问题陈述，以便彻底了解thr ptoblem。]

来到解决方案帮助我完成所需的工作，我创建了一个新的项目，使用纱线添加最少的依赖项。即。

巴别

巴别-CLI

巴别核

巴别装载机

babel-preset-es2015

babel-preset-react

babel-preset-stage-2

html-webpack-plugin

raw-loader

webpack

的WebPack-DEV-服务器

然后是devDependencies

反应

反应-DOM

material-ui [偶尔]

安装完成后，[ HERE COMES THE PART ]我用以下脚本创建了一个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/'
  }
}

在上面的代码中，在提及输出条目， devtool 和输出 转换过程之后。我实际上还有另一个要定义的东西，即别名，我用包含组件的目录定义了别名。

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

之后我提到 transpilation 的加载器和jsx的文件格式，所以它将接受 JSX语法的源代码。

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

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

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

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

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

2 个答案: