导入其他脚本时JavaScript文件无法加载的问题求助

问题原因 #

只要你的JS文件里用到了import/export这类ES模块语法，浏览器就会将该文件识别为ES模块，必须对应调整HTML中的脚本引入配置：

• 普通脚本（无模块语法）的默认执行逻辑下，浏览器遇到import关键字会直接抛出语法错误，终止整个脚本的执行，所以你定义的savE、loaD函数根本没有被注册，调用时自然会报「函数未定义」。
• 引入模块脚本时，顶层作用域是模块自身的作用域，不是全局作用域，如果你直接在HTML的行内事件（比如onclick="savE()"）里调用这些函数，也会因为找不到全局挂载的函数而出错。

解决步骤 #

1. 给HTML里引入该JS的<script>标签添加type="module"属性，示例：

<script type="module" src="你的JS文件路径.js"></script>

2. 如果需要在HTML的行内事件或者其他普通脚本里调用模块内定义的函数，需要手动把函数挂载到window全局对象上，修改你的JS文件：

import './the_story/project.js';

function savE(){
    alert("Saved!");
}

function loaD(){
    alert("Loaded!")
}

// 手动挂载到全局
window.savE = savE;
window.loaD = loaD;

3. 如果你是把带import的代码直接写在HTML的内嵌脚本里，同样要给内嵌的<script>标签加type="module"属性，再按上面的方法挂载需要全局调用的函数即可。

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