如何在Webpack中暴露第三方Vendor JS模块？

Webpack默认会把所有模块封装在闭包中，不会自动暴露到全局window对象，所以控制台没法直接访问autoComplete这类第三方模块的函数。下面是几种实用的解决方法：

方法1：手动挂载到window对象 #

这是最简单直接的方式，在引入模块的代码里，把模块赋值给window的属性：

// main.ts 中引入并挂载
import autoComplete from 'autoComplete.js';

// TypeScript环境下需要断言window为any，避免类型报错
(window as any).autoComplete = autoComplete;

如果想让TS类型检查更友好，可以在项目的类型声明文件（比如global.d.ts）里添加：

declare global {
  interface Window {
    autoComplete: typeof import('autoComplete.js').default;
  }
}

export {};

方法2：使用expose-loader插件 #

expose-loader是Webpack官方提供的loader，专门用于将模块暴露到全局。

1. 先安装依赖：

npm install expose-loader --save-dev

2. 配置Webpack：
   在webpack.config.js的module.rules中添加规则：

module.exports = {
  module: {
    rules: [
      {
        // 匹配autoComplete.js的模块文件
        test: require.resolve('autoComplete.js'),
        loader: 'expose-loader',
        options: {
          // 指定全局变量名
          exposes: ['autoComplete'],
        },
      },
    ],
  },
};

也可以在import时直接使用loader（无需修改Webpack配置）：

import 'expose-loader?exposes=autoComplete!autoComplete.js';

方法3：配置Webpack的output.library（适合整体暴露） #

如果希望整个打包后的bundle内容都暴露到全局，可以修改Webpack的output配置：

module.exports = {
  entry: './src/main.ts',
  output: {
    filename: 'bundle.js',
    // 全局变量名，比如叫MyApp
    library: 'MyApp',
    // 指定挂载到window对象
    libraryTarget: 'window',
    // 如果模块是默认导出，指定导出default
    libraryExport: 'default',
  },
};

这种方式适合把自定义代码和第三方模块一起打包后，整体作为全局对象暴露，但如果只是单个第三方模块需要全局访问，前两种方法更精准。

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