两个JavaScript文件能否通过HTML body引用通信？导入导出报错求非Webpack方案

别担心，不用Webpack也能快速搞定这个问题！你遇到的报错是因为浏览器默认把加载的脚本当作传统非模块脚本，不支持ES模块的import/export语法。下面给你两个适合项目后期的轻量化方案：

方案1：给脚本标签添加type="module" #

这是最贴合ES标准的简易方案，只需要修改HTML里的script标签，告诉浏览器这是ES模块：

修改你的HTML代码如下：

<html>
<body>
  <!-- 给需要作为模块的脚本添加type="module" -->
  <script type="module" src="/js/login.js"></script>
</body>
</html>

注意事项： #

• 不需要给functions.js单独加script标签，因为你会在login.js里用import导入它，比如：

  // login.js
  import { 你要导入的函数名 } from './exports/functions.js';
  

• 导入路径必须是**相对路径（带./或../）**或绝对路径，不能用裸模块名（比如直接写functions.js不行）
• 现代浏览器（Chrome 61+、Firefox 60+、Edge 16+）都支持这个特性，如果你的用户群体用的是现代浏览器，这个方案最省心

方案2：用全局变量模拟模块（兼容旧环境） #

如果需要兼容不支持ES模块的旧浏览器，或者不想修改太多代码结构，可以把functions.js的内容包装成立即执行函数（IIFE），把需要共享的内容挂载到全局window对象上：

修改functions.js：

// functions.js
(function() {
  // 定义你的函数
  function sayHello() {
    console.log('Hello!');
  }

  // 把需要导出的内容挂到window上
  window.MyFunctions = {
    sayHello: sayHello
  };
})();

然后在login.js里直接访问全局变量：

// login.js
MyFunctions.sayHello();

对应的HTML不需要改type属性，保持原来的写法即可：

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

总结 #

• 方案1更符合现代JS开发规范，代码更干净，适合支持现代浏览器的项目
• 方案2不需要改导入导出语法，适合需要兼容旧环境或者不想调整代码结构的场景

这两个方案都不需要引入Webpack这类打包工具，几分钟就能搞定，完全适合项目后期的快速调整。

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