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

Question

我将我的js文件包含在我的主html文件中，如此

<script type="text/babel" src="js/scripts.js"></script>

然后我调用我的一个函数

<div class="allButton" id="completeAll" onclick="showAll('completeColumn');">Show All (...)</div>

该功能看起来像这样

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

当我点击按钮（div）时，我收到此错误 Uncaught ReferenceError: showAll is not defined

我使用text/babel作为我的脚本类型，因为该文件包含React JS的东西。 我不知道为什么我根本无法调用我的功能。我是ReactJS和Babel的新手。 （注意：由于限制，我没有使用npm / gulp）

任何帮助和/或建议都将不胜感激

Answer 1

您尚未导出showAll功能。当您使用Babel转换JS / JSX文件并将其捆绑到scripts.js文件（使用Browserify或类似的实用程序）时，您必须确保导出您的模块（告诉您的捆绑包将其打包到您的捆绑文件中） 。

您的代码应如下所示：

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

module.exports = showAll;

这告诉您的bundler您需要导出showAll方法并将其提供给其他引用的命名空间。

Answer 2

如果您只是按如下方式定义功能，则可以在HTML中调用它。

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