babeljs - Babel 7 模块 UMD - 为什么 transpeiler 以小写形式定义全局项目以及如何避免它？

Question

这使用 Babel 7(为模块 UMD 配置)

import '@babel/polyfill';
import Popper from 'popper.js';

被转译为

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    //...
  } else {
    var mod = {
      exports: {}
    };
    factory(global.polyfill, global.popper);
    global.site = mod.exports;
  }
})(/* ... */);

那里 global.popper 是小写的，当 popper.js lib 在 global 中将自己定义为 global.Poopper - 第一个字母是大写的。

一年前我读过一些关于此类 UMD 问题的内容 - 但现在无法在互联网上找到详细信息。因此，请告诉我如何避免此类问题(不使用 Rollup 及其工具)。

附言global.polyfill 也是胡说八道。

实际上，我只是想以“老式方式”在没有 webpack 和 requirejs 的情况下使用 Babel - 将文件逐个转换到 js 文件夹，然后使用 <script> 加载每个脚本.就像对其工具的研究一样。但这出乎意料地难。

Answer 1

我添加了 @babel/plugin-transform-modules-umd到我的 .babelrc。此插件允许您指定全局变量别名。
这是插件documentation

现在我的 .babelrc 文件看起来像这样:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-modules-umd",
            {
                "globals": {
                    "vue": "Vue"
                }
            }
        ],
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}