webpack包导出中的反应组件库用于运行时渲染 [英] library of react components in webpack bundle export to use in on runtime rendering

问题描述

我正在升级旧版web2py（python）应用程序以使用反应组件。我正在使用webpack来浏览jsx文件以缩小js包。我想要使​​用：

I am upgrading a legacy web2py (python) application to use react components. I am using webpack to transpile the jsx files to minified js bundle. I want to be able to use:

ReactDOM.render(
  <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-container')
);

其中ComponentA包含在包中，该捆绑包包含在web2py视图中。问题是我无法在视图中访问ComponentA。以下示例将工作：

Where ComponentA is included in the bundle and the bundle is included on the web2py view. The issue is that I can't access ComponentA in the view. The following example will work:

<script>
var ComponentA = React.createClass({
     render: function() {
      var p = React.createElement('p', null, 'Passed these props: ',this.props.arg1, ' and ', this.props.arg2);
      var div = React.createElement('div', { className: 'my-test' }, p);
      return div;
  }
});

var component = React.createElement(ComponentA, {arg1:"hello", arg2:"world"})
ReactDOM.render(
  component,//I would rather use <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-sample')
);

</script>

我查看了 exports-loader 和 webpack-add-module-exports ，但我还没有得到它的工作。非常感谢任何帮助。

I looked at exports-loader and webpack-add-module-exports but I have not yet gotten it to work. Any help is greatly appreciated.

推荐答案

我遇到了此StackOverflow答案

首先确保您的 main.jsx 文件（将导入所有组件）也会导出它们：

First make sure that your main.jsx file (which would import all the components) also exports them:

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentA from './components/A';
import ComponentB from './components/B';
import style from '../stylesheets/main.scss';

// This is how every tutorial shows you how to get started.
// However we want to use it "on-demand"
/* ReactDOM.render(
  <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-container')
);*/

// ... other stuff here

// Do NOT forget to export the desired components!
export {
  ComponentA,
  ComponentB
};

然后确保使用 output.library （文档中的更多信息）在 webpack.config.js file：

Then make sure you use output.library ("more" info in the docs) in the webpack.config.js file:

module.exports = {
    entry: {
        // 'vendor': ['bootstrap', 'analytics.js'],
        'main': './src/scripts/main.jsx'
    },
    output: {
        filename: './dist/scripts/[name].js',
        library: ['App', 'components'] 
// This will expose Window.App.components which will 
// include your exported components e.g. ComponentA and ComponentB
    }
// other stuff in the config
};

然后在web2py视图中（确保包括构建文件，如main.js和相应的容器）：

Then in the web2py view (make sure you include the build files e.g. main.js AND the appropriate containers):

<!-- Make sure you include the build files e.g. main.js -->
<!-- Some other view stuff -->
<div id="react-component-a"></div>
<div id="react-component-b"></div>
<script>
// Below is how it would be used. 
// The web2py view would output a div with the proper id 
// and then output a script tag with the render block.
ReactDOM.render(
  React.createElement(App.components.ComponentA, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-a')
);

ReactDOM.render(
  React.createElement(App.components.ComponentB, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-b')
);
</script>

注意：我决定在视图中使用香草反应，而不是JSX，所以在浏览器中不需要额外的扩展。

NOTE: I decided to use the vanilla react in the view instead of the JSX so no additional transpiling has to be done in the browser.

这篇关于webpack包导出中的反应组件库用于运行时渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！