从捆绑文件中导入 React 组件答案

【问题标题】：Importing React Component from bundled file从捆绑文件中导入 React 组件
【发布时间】：2017-04-22 19:17:09
【问题描述】：

我在一个文件夹中有一堆 React 组件，我可以像这样单独导入每个组件：

import Component1 from '../components/component1/component1';
import Component2 from '../components/component2/component2';

使用这样的组件可以正常工作。但是，当我使用 Webpack 捆绑所有组件时，当我尝试导入组件时，以下代码会返回一个空对象。

import Component1 from '../dist/bundle.js';

我无法渲染这个组件。打包文件时如何导出组件？

【问题讨论】：

我的理解是Webpack正在生成一个bundle.js文件供浏览器使用，而不是其他库。
你能发布你的 webpack 配置吗？

标签： reactjs webpack

【解决方案1】：

其实你可以做到。在我的情况下，我需要在主干应用程序中反应组件，所以我做了什么：

通过在入口点（通常是index.js）中导出它们应该可以导入的反应暴露组件，例如：

import React from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Header/Header';

export {
    React,
    ReactDOM,
    Header
};

将我的捆绑输出作为库：

   output: {
        path: /some/path/of/your/lib,
        library: 'reactapp',
        libraryTarget: 'umd',
        filename: `app${jsExtension}`,
    },

然后在 requirejs config 中将名称绑定到文件路径：

reactapp: '/some/path/of/your/lib/app.js'

然后在代码中我可以将该包导入为reactapp，例如：

define(["reactapp"], function(reactapp) {
    // reactapp is object containing React, ReactDOM, Header
});

【讨论】：

【解决方案2】：

简单地说，您不能从包中导入任何模块。您需要将此代码包含在源代码中，然后将其捆绑在一起

【讨论】：

所以我必须使用另一个工具，比如 Grunt/Gulp 来构建我的组件库。然后将其包含在源代码中？
grunt/gulp 只是任务运行者。捆绑器是 browserify 和 webpack，您无法访问捆绑包中的任何内容
有没有办法将 react 原生组件共享为包文件并从包文件@Sagi_Avinash_Varma 导入该组件