如何在未设置type=module的普通JS脚本中调用ES模块内的函数

不能，主要有两个核心原因：

1. 只要你的main.js里用到了import语法，就必须给对应的script标签加上type="module"属性。普通脚本模式下浏览器不识别ES模块的import/export语法，直接运行会抛出语法错误，根本不会执行到bar函数的定义步骤。
2. 就算你加了type="module"，ES模块有独立的作用域，模块内部定义的函数默认是私有属性，不会挂载到全局window对象上，普通脚本index.js也访问不到模块内的bar函数。

如果你想要在index.js中调用bar，有两种常用改造方式：

方案1：保留ES模块写法，手动挂载全局变量 #

这种方案还是需要给main.js的script标签加type="module，只需要在main.js末尾加一行代码，把bar挂载到全局对象上：

// main.js 新增内容
window.bar = bar;

方案2：完全放弃ES模块，按顺序引入脚本 #

如果坚持不想加type="module"属性，就需要移除所有import/export语法，调整脚本引入顺序，让依赖先加载：

1. 改造module.js，移除导出语句：

function foo(text){
  alert(text)
}

2. 改造main.js，移除导入语句：

function bar(text){
   foo("FOOBAR")
}

3. 调整HTML中脚本的引入顺序：

<body>
    <script src="module.js"></script>
    <script src="main.js"></script>
    <script src="index.js"></script>
</body>

改造完成后index.js中的bar()就可以正常执行了。

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