babel-polyfill做兼容的方式是
window.Promise = …
这个做法会污染全局环境

  • 如果是一个独立的系统，无碍
  • 如果是一个第三方的库，则全局污染是万万不可以的

如果 定义的不是Promise而是Promise1这样的变量，就不会造成全局污染了。

使用babel-runtime

需要安装新的插件 @babel/plugin-transform-runtime 和 @babel/runtime

  1. {
  2.   "name": "babel",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "license": "MIT",
  6.   "devDependencies": {
  7.     "@babel/cli": "^7.12.1",
  8.     "@babel/core": "^7.12.3",
  9.     "@babel/plugin-transform-runtime": "^7.12.1",
  10.     "@babel/preset-env": "^7.12.1"
  11.   },
  12.   "dependencies": {
  13.     "@babel/polyfill": "^7.12.1",
  14.     "@babel/runtime": "^7.12.1"
  15.   }
  16. }

修改babelrc文件

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         "useBuiltIns": "usage",
  7.         "corejs": 3
  8.       }
  9.     ]
  10.   ],
  11.   "plugins": [
  12.     [
  13.       // 新增babel plugin-transformform-runtime插件
  14.       "@babel/plugin-transform-runtime",
  15.       {
  16.         "absoluteRuntime": false,
  17.         "corejs": 3,
  18.         "helpers": true,
  19.         "regenerator": true,
  20.         "useESModules": false
  21.       }
  22.     ]
  23.   ]
  24. }
  1. npx babel idnex.js
  3. # 以下是结果
  4. "use strict";
  6. var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
  8. require("core-js/modules/es.object.to-string");
  10. require("core-js/modules/es.promise");
  12. var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
  14. var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
  16. var _context;
  18. var sum = function sum(a, b) {
  19.   return a + b;
  20. };
  22. _promise["default"].resolve(100).then(function (data) {
  23.   return data;
  24. });
  26. (0, _includes["default"])(_context = [10, 20, 30]).call(_context, 20);

可见 includes _promise 等都是使用了前缀，达成了不污染全局的功能