调用外部JS文件的calcbymodel函数报ReferenceError未定义如何解决

1. 脚本执行顺序错误：index.html中调用calcbymodel的内联脚本放置在所有外部资源之前，执行该段代码时，babel工具、app.js文件都未完成加载和解析，函数未被定义。
2. Babel作用域隔离：type="text/babel"类型的脚本会被Babel Standalone默认放置在局部作用域内转译执行，内部声明的函数不会自动挂载到全局window对象，即使脚本加载完成，普通JS作用域也无法直接访问该函数。

提供两种可行方案，可根据需求选择：

方案一：调整调用位置+挂载全局函数 #

• 第一步：修改app.js，将定义的calcbymodel主动挂载到全局window对象：

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();
}
// 新增这行，将函数暴露到全局作用域
window.calcbymodel = calcbymodel;

• 第二步：调整index.html中的脚本顺序，将调用calcbymodel的内联脚本移到所有外部脚本的下方，可额外加加载监听避免时序问题：

<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="./babel.min.js"></script>
    <script src="./app.js" type='text/babel'></script>
    <!-- 调用脚本移到最后 -->
    <script type="text/javascript">
        console.log('myname');
        // 监听资源加载完成后再调用函数
        document.addEventListener('DOMContentLoaded', () => {
            calcbymodel('/model.json',[0,0,0,0]);
        })
    </script>
</body>

方案二：将调用逻辑移入app.js（更简洁，无需暴露全局） #

直接把调用calcbymodel的逻辑写在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();
}
// 直接在这里调用函数
console.log('myname');
calcbymodel('/model.json',[0,0,0,0]);

对应index.html中可以删掉原本的内联调用脚本，保留原有外部脚本引入即可。

内容的提问来源于stack exchange，提问作者YS K