Javascript Babel@Babel/插件转换运行时-在浏览器中使用

我对在浏览器中使用Babel plugin

@Babel/plugin transform runtime

感到困惑。

这是我的

.babelrc

文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "esmodules": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": true,
        "version": "7.9.6"
      }
    ]
  ]
}

这是我在

dist

文件夹中传输的

main.js

代码

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import header from './components/header.js';
import user from './components/user.js';

var app = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator(function* () {
    document.getElementById('header').innerHTML = header();
    document.getElementById('user').innerHTML = yield user();
  });

  return function app() {
    return _ref.apply(this, arguments);
  };
}(); // init app

app();

我看到上面的代码不准备直接在浏览器中运行。因此，我必须手动更改第一行，如下所示：

import _asyncToGenerator from './components/asyncToGenerator.js'

当然，我必须手动将

asyncToGenerator.js

从

node\u modules

复制到相应的项目文件夹中

有没有办法运行Babel并自动在我的组件文件夹中获取此esm文件？我是否在使用

@babel/plugin transform runtime

插件的过程中遗漏了什么