两个JS文件能否通过HTML Body引用通信？导入导出报错求简便方案

当然可以不用Webpack！你遇到的语法错误是因为浏览器默认把普通<script>标签里的代码当成非模块处理，不支持ES模块的import/export语法。这里有两个超简便的解决方案，完全适配你项目后期不想大改的需求：

这是最规范的方式，不用引入打包工具，直接让浏览器支持模块语法。只需要给每个<script>标签加上type="module"属性，然后正常使用export和import即可。

步骤： #

1. 修改HTML中的脚本标签：

<html>
<body>
  <script type="module" src="/js/exports/functions.js"></script>
  <script type="module" src="/js/login.js"></script>
</body>
</html>

2. 在functions.js中导出内容：

// functions.js
export function validateFormData(data) {
  // 你的函数逻辑
  return !!data.username && !!data.password;
}

3. 在login.js中导入使用：

// login.js
// 注意路径要写对，需要包含完整的.js后缀
import { validateFormData } from './exports/functions.js';

// 直接调用导入的函数
const formData = { username: 'test', password: '123456' };
console.log(validateFormData(formData));

注意事项：

• 模块脚本默认是defer加载的，会在DOM解析完成后执行，不用担心脚本加载顺序问题
• 本地开发用localhost没问题，但如果是部署到服务器，要确保服务器正确处理模块MIME类型（大部分现代服务器都支持）
• 所有现代浏览器（Chrome、Firefox、Edge、Safari 10.1+）都支持ES模块

如果不想改模块语法，直接把需要共享的内容挂载到window全局对象上，另一个脚本就能直接访问。这种方式零成本修改，适合快速解决问题。

步骤： #

1. 在functions.js中把函数/变量挂到window：

// functions.js
// 不用export，直接赋值给window对象
window.validateFormData = function(data) {
  return !!data.username && !!data.password;
};

2. 在login.js中直接使用：

// login.js
// 不用import，直接调用全局函数
const formData = { username: 'test', password: '123456' };
console.log(validateFormData(formData));
// 也可以显式写window.validateFormData，更清晰

3. HTML保持你原来的写法即可，不需要加type="module"：

<html>
<body>
  <script src="/js/exports/functions.js"></script>
  <script src="/js/login.js"></script>
</body>
</html>

优缺点：

• 优点：完全不用改现有HTML结构，代码修改量极小，上手快
• 缺点：会污染全局作用域，如果多个脚本有同名变量/函数可能冲突，但对于小型项目或后期应急非常实用

总结一下：两个JS文件通过HTML body引用完全可以通信，Webpack绝对不是唯一解决方案。根据你的需求，我更推荐方法2，最快最省事；如果想追求代码规范，方法1也很简单，不需要任何额外工具。

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