Webpack + React：未定义可重用组件答案

【问题标题】：Webpack + React : reusable component is not definedWebpack + React：未定义可重用组件
【发布时间】：2016-07-20 09:39:27
【问题描述】：

我正在尝试创建一个我想在同一页面中多次使用的 React 组件 DynamicCollection。

我想要的是一个来自 dynamicCollection.jsx 的文件 dynamicCollection.js 和几个像这样使用组件 DynamicCollection 的文件：

dyna1.js 与ReactDOM.render(<DynamicCollection p1=... p2=.../>,document.getElementById(dyna1));
dyna2.js 与ReactDOM.render(<DynamicCollection p1=... p2=.../>,document.getElementById(dyna2));

...

在 dynamicCollection.jsx 我有这个：

export default class DynamicCollection extends React.Component { ... }

最后在 webpack.config.js 中：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './build');
var APP_DIR = path.resolve(__dirname, './app');

var config = {
    entry: {
        'DynamicCollection': './app/DynamicCollectionBox.jsx',
        'dyna1': './app/dyna1.js',
        'dyna2': './app/dyna1.js',
    },
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    module : {
        loaders : [
        {
            test: /\.jsx?/,
            loader : 'babel?presets[]=es2015'
        }
      ]
    }
};

module.exports = config;

问题是我在浏览器控制台中收到此错误：

ReferenceError: DynamicCollection 未定义

（注意：我在 html 文件中包含了 DynamicCollection.js、dyna1.js 和 dyna2.js）

你能帮忙吗？

提前谢谢你！

【问题讨论】：

输出文件名也区分大小写。所以你应该在 html 文件中包含“DynamicCollection.js”。
是的，你是对的。但即使这样，我也得到了同样的信息......
@user2739974 并且您是否在文件DynamicCollection.jsx 中导入组件DynamicCollection dyna1.js 和dyna2.js 并且您不需要在html 中导入这三个文件而只需[name].js由你的 webpack 生成
@ShubhamKhatri ：是的，我用import {DynamicCollection} from 'DynamicCollection.jsx' 尝试过，但后来我得到了一个用于 dyna1.js 的大文件。没有导入，DynamicCollection.js 大小为 70 kB，dyna1.js 和 dyna2.js 大小为 2 kB，但导入 dyna1.js 和 dyna2.js 大小为 71 kB，因此它不是很有用，因为复制了 DynamicCollection 的代码对于每个 dynaX.js
好吧，它会是，但看看你使用 webpack 的目的。当您想将代码用于生产时，您可以使用带有 webpack 的 uglifyJs 插件，它的作用是删除所有冗余代码并缩小文件。因此，如果这有效，您不必担心文件大小，因为您就是这样做的。

标签： javascript reactjs ecmascript-6 webpack chunks

【解决方案1】：

好的。我找到了答案。我所做的是在 webpack 输出中引入了以下属性；

library: 'ReactWelcomeComponent',
libraryTarget: 'var'

然后在我的角度指令中，我可以访问如下所示的反应组件；

var JSXReactComponent = React.createFactory(ReactWelcomeComponent.default);

通过这种方法，我可以调用作为 webpack 步骤的一部分生成的 React 组件并在角度上下文中访问。

【讨论】：