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>

导出webpack的库

2 个答案: