Javascript 从HTML调用babel脚本中定义的js函数

我把我的js文件包括到我的主html文件中，就像这样

然后我像这样调用我的一个函数

显示所有（…）

函数如下所示

function showAll(column) {
  $('div[id^='+column+']').removeClass('hide');
};

当我点击按钮（div）时，我得到了这个错误

未捕获引用错误：未定义showAll

我使用

text/babel

作为脚本类型，因为该文件包含React JS内容。 我不知道为什么我不能调用我的函数。我对ReactJS和Babel非常陌生。（注意：由于限制，我没有使用npm/gulp）

---

如果您尚未导出

showAll

功能，请提供任何帮助和/或建议。使用Babel传输JS/JSX文件并将其绑定到

scripts.JS

文件（使用Browserify或类似实用程序）时，必须确保导出模块（这会告诉绑定器将其打包到绑定文件中）

您的代码应该如下所示：

var showAll = function(column) {
  $('div[id^='+column+']').removeClass('hide');
};

module.exports = showAll;

---

这会告诉您的绑定器，您的

showAll

方法需要导出并可用于其他引用的名称空间。

如果您仅按以下方式定义函数，您将能够在HTML中调用它

window.showAll = function showAll(column) {
    // your code here...
};

---

浏览器无法识别

type=“text/babel”

，因此未对脚本求值，且

showAll

功能不存在。如果您使用的是babel，你真的应该在代码进入浏览器之前编译代码，然后用标准的

包含编译后的代码。我认为以前可以在客户端使用babel Transfilation，但似乎已经停止了/不被鼓励了：问题是OP不传输代码，希望它能自动工作；）无论如何，运输都很重要。它是有效的ES5。我担心的是，OP没有正确地捆绑他的代码以将其公开给浏览器。