从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;

这告诉您的捆绑器您的showAll方法需要导出并可供其他引用的命名空间使用。