浏览器端如何通过JavaScript代码从相对URL导入JavaScript文件？

嘿，我懂你不想用传统的HTML导入JS文件的心情，想要用上现代的ES模块import语法对吧？这事儿不难，我给你拆解下具体怎么实现：

第一步：把主脚本标记为模块 #

你还是需要在HTML里加一个script标签，但要给它加上type="module"属性——这个属性会告诉浏览器：“这是个ES模块文件，允许里面用import语法哦”：

<script type="module" src="/static/javascript/your-main-code.js"></script>

这个标签会加载你的主JS文件，而主文件里就可以自由导入其他模块了。

第二步：在主文件里使用import语法 #

现在在你的主脚本（比如your-main-code.js）里，就可以直接写你想要的代码了：

// 导入目标函数
import { functionName } from "/static/javascript/fileName.js";

// 调用函数
functionName();

这里有个小细节：最好给导入的文件名加上.js后缀，虽然部分现代浏览器支持省略，但加上后缀能避免不必要的兼容性问题，路径也更清晰。

一些需要注意的点 #

• 本地运行的CORS问题：如果你直接用file://协议打开本地HTML文件，浏览器可能会因为跨域限制阻止模块加载。解决办法是用本地服务器来运行项目，比如用Node.js的http-server包，或者Python的python -m http.server命令启动一个简单的本地服务器，这样就能正常加载模块了。
• 浏览器兼容性：现在Chrome、Firefox、Edge、Safari这些主流浏览器都原生支持ES模块，如果你不需要兼容特别老旧的浏览器，直接用原生模块就足够了。如果要兼容旧浏览器，可以考虑用Webpack、Rollup这类打包工具把模块打包成兼容的格式。

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