在前端开发中，我们经常需要使用 Promise 对象来处理异步操作，在浏览器中直接使用 Promise 是完全没有问题的，但是在使用 Webpack 进行编译时，有可能会出现 Promise 全局变量未定义的问题。这是因为 Webpack 默认只会打包已经被引入的模块，而 Promise 对象并不在任何模块中被引入，因此在编译时会被忽略。
本文将针对这个问题进行详细的阐述，并给出解决方案。
问题分析
通过查看 Webpack 打包后的代码，我们可以发现 Promise 全局变量缺失的原因是 Webpack 对 global 对象的处理不同于浏览器环境下的处理方式。在浏览器环境下，Promise 对象可以直接通过 window.Promise 访问到，而在 Webpack 的编译环境下，Promise 对象只能通过 global.Promise 访问。因为在浏览器环境下，window 对象也是全局对象，而在 Node.js 环境下，global 对象才是全局对象。
解决 Promise 对象未定义的问题的关键在于找到一种方式，在 Webpack 编译后的代码中，能够让访问 Promise 对象的代码正确地获取到 Promise 对象。下面我们将介绍两种可行的方案。
方案一：使用 ProvidePlugin 提供全局变量
Webpack 提供了 ProvidePlugin 插件，它可以自动加载模块，并将模块中的指定变量注入到每个使用了这些变量的模块中。我们可以使用 ProvidePlugin 将 Promise 对象注入到每个模块中，解决 Promise 全局变量未定义的问题。
具体步骤如下：
- 在 Webpack 的配置文件中引入
ProvidePlugin：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- -------
-------- -
--- -----------------------
-------- ------------- -- -- ------- --
--
-
--- 运行 Webpack 编译，完成后就可以在所有打包后的代码中访问
Promise对象了。
这里我们使用了 es6-promise 模块来提供 Promise 对象。如果您的项目中已经引入了 babel-polyfill 或者其他可以提供 Promise 对象的模块，也可以在 ProvidePlugin 中指定相应的模块名。
方案二：手动引入 Promise 对象
除了使用 ProvidePlugin 自动注入全局变量外，我们还可以手动在每个需要使用 Promise 的模块中引入 Promise 对象。
在每个需要使用 Promise 的模块中，增加以下代码：
import "es6-promise/auto";
或者：
require("es6-promise/auto");这些代码的功能是自动引入 es6-promise 模块，并向 global 对象中注入 Promise 对象。这样就可以在 Webpack 编译后的代码中正常地访问 Promise 对象了。
总结
无论是使用 ProvidePlugin 还是手动引入 Promise 对象，都可以很好地解决 Webpack 编译时的 Promise 全局变量未定义问题。总体来说，使用 ProvidePlugin 会更加方便，但如果您的项目中已经引入了 babel-polyfill 或者其他可以提供 Promise 对象的模块，手动引入 Promise 对象也是很好的选择。
代码示例：
-- -------------------- ---- ------- ------ ------------------- --- ------- - --- ----------------- ------- -- - -- ------- --- ----------------- -- - ------------------- ------ -------------- -- - --------------------- ------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df44b9f6b2d6eab3a78b5a