为什么 JS 在 babel 脚本中找不到函数？

Question

这是我的索引文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="test">
    <title>test</title>
</head>

<body>
    <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script> -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="/app.js" type='text/babel'></script>
    
    
    <script type="text/javascript">
        fnc();
    </script>

</body>

</html>

这里是 app.js 文件

function fnc() {
    console.log('myname');
}

我想知道为什么控制台说：

Uncaught ReferenceError: fnc is not defined
    at (index):19
(anonymous) @ (index):19

如果我使用 text/javascript 更改脚本类型，它可以正常工作。但是，我需要它是 tensorflow 脚本的 babel 脚本才能在 IE11 中工作。

有人能帮帮我吗？

Answer 1

Babel 所做的是将现代语法中的代码转换为旧语法。这可能是一个密集的过程 - 因此，它不会立即转译脚本标签，而是异步转译它们。 app.js 在内联脚本标签运行时尚未被 Babel 转译。

虽然您可以添加延迟或添加一些方法来检测转译的脚本何时实际运行，但处理此类问题的更好方法是将 所有代码进入被转译的脚本，所以你不会得到像这样的竞争条件。

更好的方法是提前转换脚本，然后在您的页面上托管和加载that 脚本。在生产中使用 Babel Standalone 不是一个好主意，因为它可能非常重量级 - 最好将处理工作放在 服务器 上，一次，在转译时，而不是每次都在每个客户端上他们加载页面。

然后你可以有类似的东西

<script src="/transpiledApp.js"></script>
<script type="text/javascript">
    fnc();
</script>

它会起作用的。

Answer 2

除了@CertainPerformance的回答外，

如果想直接调用函数fnc()，那么类型应该是text/babel，因为它定义在babel和transpiled中。如果您使用 text/javascript 它将在 window 对象中搜索它。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="/app.js" type='text/babel'></script>

<script type="text/babel"> //<-- not text/javascript
    fnc(); // works fine
</script>

为什么 JS 在 babel 脚本中找不到函数？

Why JS cannot find the function in babel script?

javascript

babeljs