Html 不读取我的 js 函数答案

【问题标题】：Html Doesnt read my js functionsHtml 不读取我的 js 函数
【发布时间】：2018-08-24 22:54:53
【问题描述】：

我使用 react 创建幻灯片，问题是我的 html 没有找到更改幻灯片的功能。它是这样的：

<!DOCTYPE html>
<html>
<body>
  <header Access-Control-Allow-Origin: *>
  </header>
  <main id="peli">
    <div id="root">
    </div>
    <script src="dist/app.bundle.js">plusSlides(2)</script>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </main>
</body>
</html>

在我的 js 文件中，我有一个 ReactDOM.render 来渲染我的 html 和一个更改幻灯片的函数 plusSlides，但由于某种原因程序找不到函数 plusSlides。我使用 webpack 来编译我的文件。

【问题讨论】：

你看到的唯一 reactjs 可能是 #root
是的，我认为问题不在于代码的反应部分，因为代码有效，但是没有找到更改幻灯片的功能
在 webpack 编译你的文件之后，plusSildes 函数不可用，就像你在普通 JavaScript 中正常定义 plusSlides 函数那样。为什么不在 React 本身中包含图像滑块。这是在 React 中做事的正常方式——在 React App 本身内做大部分事情（主要是那些需要 JS 的事情）。

标签： javascript html reactjs webpack slideshow

【解决方案1】：

Webpack 通常不会将东西暴露给 window。您应该从 javascript 进行初始化。
但是您可以将 webpack 告诉 export a library，这将按您的意愿工作。

您所要做的就是将其添加到输出配置中。

output: {
    filename: 'app.js',
    library: 'webpackLib',
    libraryTarget: 'window',
},

您有不同的目标选项，请查看文档以获取更多信息。

【讨论】：