为什么我不能在其他 JS 文件中使用该函数？答案

【问题标题】：Why can't I use the function in other JS file?为什么我不能在其他 JS 文件中使用该函数？
【发布时间】：2021-11-11 00:37:10
【问题描述】：

这是我的索引文件

<!DOCTYPE html>
<html>

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

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="test">

    <title>test</title>
</head>

<body>
    
    <script type="text/javascript">
        console.log('myname');
        calcbymodel('/model.json',[0,0,0,0]);
    </script>

    <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><!-- fetch -->
    <script src="./babel.min.js"></script><!-- babel -->
    <script src="./app.js" type='text/babel'></script>
</body>

</html>

这里是 app.js 文件

async function calcbymodel(path, input) {
    const model = await tf.loadLayersModel(path);
    const r = model.predict(tf.tensor(input));
    r.data().then(array => console.log(array));

    return r.data();
}

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

Uncaught ReferenceError: calcbymodel is not defined
    at (index):21
(anonymous) @ (index):21

对于 babel 脚本，由于公司政策拒绝，无法导入。所以，我作为本地文件导入。这是链接：

https://unpkg.com/@babel/standalone/babel.min.js

谁能帮帮我？

原来是 babel 脚本问题。这是链接： Why JS cannot find the function in babel script?

【问题讨论】：

bundle 是完全独立的，不会向全局命名空间公开任何内容。如果您希望您的脚本使用该功能，请将您的脚本作为包的一部分，包括导入或要求（取决于您的包的基本代码是 ESM 还是 CJS）。不要内联它。
另外，你需要 babel 做什么？获取polyfill？你在什么浏览器上运行这个？ IE 6？你在做客户端机器学习！
this question上有一个很好的答案

标签： javascript tensorflow.js

【解决方案1】：

您需要将 app.js 文件移动到您正在使用该功能的上方。在这种情况下，您需要将您正在使用该函数的脚本标记移到 app.js 脚本下方，或者将 app.js 脚本移到您使用该函数的位置上方。

<!DOCTYPE html>
<html>

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

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" 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><!-- fetch -->
    <script src="./babel.min.js"></script><!-- babel -->
    <script src="./app.js" type='text/babel'></script>
    <script type="text/javascript">
        console.log('myname');
        calcbymodel('/model.json',[0,0,0,0]);
    </script>
</body>

</html>

由于HTML是按照js文件在文件中的顺序加载的，所以一个函数可以在HTML文件中它下面的任何脚本标签中使用。

【讨论】：

对我不起作用....github.com/yoonsungkim87/share/blob/master/…

【解决方案2】：

JS当前按照你定义的顺序执行：

<body>
<body>
  <!-- This is first -->
  <script type="text/javascript">
    console.log('myname');
    calcbymodel('/model.json', [0, 0, 0, 0]);
  </script>
  <!-- This is second-->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
  <!-- This is third-->
  <script src="https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.js"></script>
  <!-- fetch -->
  <!-- This is fourth-->
  <script src="./babel.min.js"></script>
  <!-- babel -->
  <!-- This is fitht-->
  <script src="./app.js" type="text/babel"></script>
</body>

如果你想在你的代码中访问另一个函数，你需要将你的第一个脚本移到底部，第二个问题似乎是 type="text/babel" 必须设置到 babel 脚本而不是应用程序。

我用 CDN 和这个应用尝试过：

<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="./app.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" type="text/babel"></script>
  <script type="text/javascript">
    console.log('myname');
    calcbymodel('/model.json', [0, 0, 0, 0]);
  </script>
</body>

在 app.js 中：

const calcbymodel = ()=>{
    console.log("make calculations");
}

【讨论】：

对我不起作用....github.com/yoonsungkim87/share/blob/master/…
哦，我刚刚注意到类型错误，我更新我的答案。