导出Webpack库

Question

所以对于一个项目，我想开始使用reactjs，但是不幸的是，当前项目没有构建管道。 我想现在我可以使用WebPack，Babel和Sass设置构建管道并将其全部编译成一个包，我们将其称为bundle.js 。 我可以将已编译的javascript文件链接到我们的渲染页面之一，然后我的目标是以某种方式导出组件，以便可以使用以下功能创建它。

ReactDOM.render(
  React.createElement(MyExportedComponent, {prop: 'prop'}, null),
  document.getElementById('root')
);

导出类的正确方法是什么？

export default MyExportedComponent足够？

Answer 1

通常，您将在bundle.js中调用ReactDOM.render() ，通常是在表示捆绑包入口点的文件中。

这意味着，您无需导出任何内容，只需将bundle.js嵌入到HTML文件中即可。

---

如果您需要从包中导出某些内容，可以通过在window上设置一个属性将其附加到全局范围。 您应该尝试避免这种情况。

Answer 2

我最终更改了WebPack配置，以将代码导出为捆绑包。

这是主要的已编译JavaScript文件中的导出包

exportedLibary.js

module.exports = {
    someRender: (element) => {
        ReactDom.render(
             <div>Hello</div>
        );
    }
}

并修改WebPack配置文件中的输出参数：

webpack.config.js

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'someDir'),
    library: 'RenderComponent'
}

现在，我们可以在任何项目中使用导出的库。

someProject.html

<script src="someDir/bundle.js"></script>