Question

我想从我的webpack捆绑文件外部加载组件到我的React应用程序。为了阐述我的观点，这里有一个我想要的示例HTML文件：

<!doctype html>
<html>
<head> ... </head>
<body>
    <div id="app"></div>
    <script src="/dist/app.js"></script>
    <script src="/external-component/timer-component.js"></script>
</body>
</html>

我基本上希望能够加载计时器组件，但仍然使该组件依赖于app.js（webpack捆绑文件），因为app.js具有React。换句话说，我希望计时器组件知道React存在。我当前的计时器组件文件如下（取自ReactJS网站）：

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { secondsElapsed: 0 };
  }

  tick() {
    this.setState(prevState => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return React.createElement(
      "div",
      null,
      "Seconds Elapsed: ",
      this.state.secondsElapsed
    );
  }
}

我不断收到React不存在的错误。如果我尝试导入React：

 const React = require('react');
 // or
 import React from 'react';

我收到一个错误，需要（或导入）未定义。这样做的正确方法是什么？我的理解是webpack app.js文件类创建了名称空间，因此React组件并没有真正看到外部世界。只有webpack文件中的组件才能看到React。如果是这种情况，我怎样才能揭露对外界的反应？

Answer 1

我想你想使用＆＃34; script-loader＆＃34; Webpack的插件。我用它来做这件事，效果很好。

https://github.com/webpack/script-loader

这是将所有内容保留在index.html之外并将所有需求放在一个位置的好方法，例如我的种子项目index.js中包含了所有这些内容，而在其他项目中我只需要在需要时添加脚本。他们甚至不必安装npm，你可以在你的项目中有一个脚本并以这种方式加载到bundle中。

（我的一个项目使用webpack＆＃39; s脚本加载器）

private void Form1_Load(object sender, EventArgs e)
    {
        merged_QueryTableAdapter.Adapter.Fill(dbLinkDataSet.Merged_Query);
    }
private void button1_Click(object sender, EventArgs e)
    {
        try
        {
            this.Validate();
            this.merged_QueryBindingSource.EndEdit();
            this.merged_QueryTableAdapter.Adapter.Update(this.dbLinkDataSet.Merged_Query);
            this.merged_QueryTableAdapter.Adapter.Fill(this.dbLinkDataSet.Merged_Query);
        }
        catch (System.Exception ex)
        {
            MessageBox.Show("Update failed" + ex);
        }
    }

Answer 2

在app.js的某个地方，声明作为全局变量做出反应。 window.React = React

这样您就可以从其他组件访问它了。

另一种方法是外部化来自webpack构建的反应，并通过页面中的脚本标记包含它。

要外部化反应，请在您的webpack配置中包含此内容 externals: {'react': 'React'}

将此内容包含在您的html中以便全局访问。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

如何从webpack捆绑javascript中单独加载组件？

2 个答案: