将 Utils.js 挂载为全局（window.Utils.xx）完整配置方案

将 Utils.js 挂载为全局（window.Utils.xx）完整配置方案分最常用的 3 种场景 （原生 JS / Webpack / Vite）讲清楚，你直接对应自己的项目用就行，所有配置一步到位。

核心目标：把 Utils 工具函数挂载到 window 对象 上，全局任何地方直接用 window.Utils.方法名 调用。

一、先写好 Utils.js 本身（通用）

不管什么项目，Utils.js 内部写法固定：

javascript 复制代码

// Utils.js
const Utils = {
  // 写你的工具方法
  formatDate: function() {},
  copyText: function() {},
  debounce: function() {},
  // ...更多方法
};

// 关键：挂载到 window 全局
window.Utils = Utils;

// 兼容 CommonJS（可选，让它能被 import/require）
if (typeof module !== 'undefined') {
  module.exports = Utils;
}

二、场景 1：原生 HTML / 无构建工具（最简单）

不需要任何配置！

直接用 <script> 引入 Utils.js 优先加载 即可：

html 复制代码

<!-- 先引入 Utils.js -->
<script src="./Utils.js"></script>

<!-- 后面任何脚本都能直接用 -->
<script>
  // 直接使用
  window.Utils.formatDate();
  Utils.formatDate(); // window 可省略
</script>

✅ 生效条件：Utils.js 必须在使用它的脚本之前加载

三、场景 2：Webpack 项目（Vue2 / React 旧项目）

需要两步配置，让 Webpack 把 Utils 自动挂载到全局。

1. 安装依赖（如果没有）

bash 复制代码

npm install expose-loader --save-dev

2. 配置 webpack.config.js

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./src/utils/Utils.js'), // 你的文件路径
        use: [
          {
            loader: 'expose-loader',
            options: {
              exposes: {
                globalName: 'Utils', // 全局变量名
                override: true,
              },
            },
          },
        ],
      },
    ],
  },
};

3. 入口文件 main.js 引入

javascript 复制代码

// main.js
import './utils/Utils.js';

✅ 完成：全局任何文件直接用 window.Utils.xxx

四、场景 3：Vite 项目（Vue3 / React 最新项目）

Vite 更简单，不用装 loader，2 步搞定。

1. 在入口文件 main.js 引入并挂载

javascript 复制代码

// main.js
import Utils from './utils/Utils.js';

// 直接挂载到 window
window.Utils = Utils;

2. 提供类型提示（TS 项目可选）

在 src/vite-env.d.ts 添加：

typescript 复制代码

declare interface Window {
  Utils: typeof import('./utils/Utils').default;
}

✅ 完成：全局任意地方 window.Utils.方法 直接用

五、验证是否生效

在浏览器控制台 F12 输入：

javascript 复制代码

console.log(window.Utils);

能打印出工具对象 = 配置成功 ✅

最简总结

Utils.js 内部必须写 window.Utils = Utils
原生项目：直接 script 引入
Webpack：用 expose-loader 配置
Vite ：入口文件 window.Utils = Utils 即可