TypeScript 中 Webpack 怎么使用 ProvidePlugin 自动加载模块-js教程-PHP中文网

typescript 项目中用 webpack provideplugin 自动加载模块需同步配置插件与类型声明：webpack 中通过 plugins 添加 provideplugin 实例（注意 es 模块需指定 default），ts 中在 global.d.ts 声明全局变量类型，并在 eslint 配置中设为 readonly 全局变量，vue 项目还需确保 vue-loader 和 ts-loader 正常协作。

typescript 中 webpack 怎么使用 provideplugin 自动加载模块

在 TypeScript 项目中用 Webpack 的 ProvidePlugin 自动加载模块，核心是两步：Webpack 配置注入 + TypeScript 类型识别。光配插件不处理类型，TS 编译会报错；只加类型不配插件，运行时会找不到变量。

Webpack 配置 ProvidePlugin

在 webpack.config.js 的 plugins 中添加插件实例。注意路径和导出方式，尤其对 ES 模块：

基础写法（适用于 CommonJS 或默认导出明确的包）：
new webpack.ProvidePlugin({ $: 'jquery', _: 'lodash' })
ES 模块需显式指定 default：
new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm-bundler.js', 'default'] })
自定义工具函数可指向本地文件：
new webpack.ProvidePlugin({ _deepClone: [path.resolve(__dirname, 'src/utils/clone.ts'), 'deepClone'] })

TypeScript 类型声明必须补全

ProvidePlugin 只影响运行时，不提供类型信息。TS 编译器仍会报 Cannot find name '_' 这类错误。解决方法：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

在 src/types/global.d.ts（或任意 .d.ts 文件）中声明全局变量：
declare const _: typeof import('lodash');
declare const $: typeof import('jquery');
若使用命名导出（如 lodash/debounce），可单独声明：
declare const debounce: typeof import('lodash/debounce');
确保 tsconfig.json 的 include 或 typeRoots 覆盖该声明文件

ESLint 不报错的关键配置

即使 TS 不报错，ESLint 仍可能提示 '_' is not defined。需在 ESLint 配置中声明为全局变量：

若用 .eslintrc.js：
module.exports = { globals: { _: 'readonly', $: 'readonly', jQuery: 'readonly' } };
若用 package.json 中的 eslintConfig：
"globals": { "_": true, "$": true }