Question

我有一些React组件，我想创建一个包含它们的捆绑文件，并在另一个HTML文件中使用它。

我做了什么：我创建了一个Webpack配置文件，该文件将/src文件夹中的index.js用作条目文件，并生成一个components.js之类的捆绑文件

我导出 /src/index.js文件中的所有组件，我认为在与Webpack捆绑在一起后，所有组件都可以访问

我在Webpack中使用外部密钥仅从源而不是外部库生成捆绑文件

最后，我将react和bundle文件脚本放入HTML文件中，我想将它们用作纯JavaScript函数。

<html>
  <head>
    <title></title>
  </head>
  <body>
    <header id="headerContent"></header>
    <section id="newsContent"></section>
    <section id="categoryContent"></section>
    <footer id="footerContent" ></footer>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <script type="text/javascript" src="components.js"></script></body>

    <script>
        ReactDOM.render(React.createElement(HeaderComponent), document.getElementById("headerContent"))
        ReactDOM.render(React.createElement(NewsComponent), document.getElementById("newsContent"))
        ReactDOM.render(React.createElement(NewsComponent), document.getElementById("categoryContent"))
        ReactDOM.render(React.createElement(FooterComponent), document.getElementById("footerContent"))
    </script>
  </body>
</html>

但是它不起作用。我有什么问题吗，最好的解决方案是什么？ Webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React',
    'react-dom' : 'ReactDOM'
  }
}

Answer 1

简单的方法是将组件分配给window对象中的变量。这样，无需更改Webpack配置。

window.HeaderComponent = HeaderComponent

我们可以使用其他HTML文件中的组件。

   <script>
        ReactDOM.render(React.createElement(window.HeaderComponent), document.getElementById("headerContent"))
        ReactDOM.render(React.createElement(window.NewsComponent), document.getElementById("newsContent"))
        ReactDOM.render(React.createElement(window.NewsComponent), document.getElementById("categoryContent"))
        ReactDOM.render(React.createElement(window.FooterComponent), document.getElementById("footerContent"))
    </script>

将所有React组件导出到Webpack捆绑文件中，并在html文件中使用

1 个答案: