Question

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

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

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

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

我无法呈现此组件。如何在捆绑文件时导出组件？

Answer 1

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

Answer 2

实际上您可以做到。在我的情况下，我需要在主干应用程序中使用React组件，所以我做了什么：

通过在入口点（通常为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配置中的文件路径：

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

然后在代码中，我可以像reactapp那样导入该捆绑包：

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

从捆绑文件导入React组件

2 个答案: