如何在HTML中调用带有export语句的外部JavaScript文件？

嘿，你遇到的「Unexpected token export」错误其实很好解决——核心原因是：浏览器默认把通过<script src>引入的JS文件当作传统脚本，而传统脚本不支持ES6的export/import模块语法。直接在<script>里用import也不行，因为没开启模块模式。

下面给你三种可行的解决方案，按需选择：

方案1：用ES模块模式引入（推荐） #

这是最标准的ES6模块用法，只需两步修改：

1. 修改外部JS的引入标签，添加type="module"，告诉浏览器这是ES模块：

<script type="module" src="myExternFile.js"></script>

2. 页面内的<script>也要改成模块模式，通过import导入函数：

<script type="module">
  // 注意：模块路径必须写相对路径（加./或../），不能直接写文件名
  import { myFunction } from './myExternFile.js';
  console.log(myFunction("some text"));
</script>

⚠️ 注意：ES模块受浏览器跨域限制，本地直接打开file://协议的HTML可能报错，建议用本地服务器（比如http-server）测试。

方案2：打包工具转换（适合大型项目） #

如果你的项目用到Webpack、Vite这类打包工具，可以把ES模块转换成浏览器能识别的传统脚本：
把外部JS的export改成CommonJS语法：

module.exports = function myFunction(text) { return text; }

然后通过打包工具编译后，再把生成的JS文件引入HTML即可。

方案3：挂载到全局对象（快速临时方案） #

如果不想用模块语法，也可以把函数直接挂载到window全局对象上，这样就能在任意地方访问：
修改外部JS文件：

window.myFunction = function(text) { return text; }

然后HTML里不用改，直接按原来的方式引入和调用：

<script src="myExternFile.js"></script>
<script>
  console.log(myFunction("some text"));
</script>

这种方式简单，但会污染全局作用域，不推荐在大型项目中使用。

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