浏览器端JavaScript文件能否复用其他JS文件中的公共函数

1. 原生浏览器环境默认不支持CommonJS规范，你代码里用的require()导入、module.exports导出是Node.js专属语法，直接在浏览器运行会失效，导致你赋值的x变量为undefined，调用x.ShowAlertSuccess就会触发对应报错。
2. cUtilitiesForm.js存在大小写拼写错误：你定义的函数名为ShowAlertSuccess（首字母S大写），导出时写的是showAlertSuccess（首字母s小写），就算支持CommonJS也会因为变量名不匹配找不到方法。

下面提供三种不同场景的修复方案：

方案1：原生全局挂载（无需工具，快速修复） #

适合小项目/简单场景，不需要额外构建工具：

• 修改index.html的JS引入顺序，依赖的工具文件要先加载：

<body>
   <button onclick="ShowMyAlert()"></button>
<!-- 先加载工具函数文件 -->
<script src="/js/cUtilitiesForm.js"></script>
<!-- 后加载依赖工具函数的home.js -->
<script src="/js/home.js"></script>
</body>

• 改造cUtilitiesForm.js，删除CommonJS导出代码，把函数挂载到全局window对象：

function ShowAlertSuccess(title) {
       Swal.fire(
           `${title}`,
           'success'
       )
}
// 挂载到全局，后续加载的JS都可以直接调用
window.ShowAlertSuccess = ShowAlertSuccess

• 改造home.js，删除require代码，直接调用全局方法：

function ShowMyAlert() {
     ShowAlertSuccess('Good job')
}

方案2：ES Module规范实现（原生浏览器支持，更规范） #

原生浏览器已经支持ES Module标准的导入导出，不需要全局污染：

• 给script标签添加type="module"属性：

<body>
   <button onclick="ShowMyAlert()"></button>
<script type="module" src="/js/home.js"></script>
</body>

• 改造cUtilitiesForm.js，用ES Module的export导出，修正大小写错误：

export function ShowAlertSuccess(title) {
       Swal.fire(
           `${title}`,
           'success'
       )
}

• 改造home.js，用import导入方法，同时把对外暴露的函数挂载到全局（模块内的顶层变量默认私有，HTML的onclick无法直接调用）：

import { ShowAlertSuccess } from './cUtilitiesForm.js'

function ShowMyAlert() {
     ShowAlertSuccess('Good job')
}
// 挂载到全局供HTML事件调用
window.ShowMyAlert = ShowMyAlert

方案3：使用前端构建工具 #

正式项目推荐使用Vite、Webpack等前端构建工具，这类工具会自动处理不同规范的导入导出逻辑，打包后输出浏览器可直接运行的代码，只需要提前修正cUtilitiesForm.js中的导出名称大小写错误即可正常使用。

内容的提问来源于stack exchange，提问作者Quốc Thiệu