Babel试图导入一个不存在的模块

Question

我的编译的Babel输出试图导入不存在的函数/文件。我是否缺少将输出此文件的Mix / Babel / Webpack配置中的配置或步骤？

我使用默认配置的Laravel Mix（5.0.4）。

我最近第一次使用Javascript await运算符。这导致Babel问题。当Babel处理await以使其向后兼容时，它将import _regeneratorRuntime from "@babel/runtime/regenerator";添加到Javascript文件的开头。但是，babel/runtime/regenerator实际上不存在。当浏览器尝试加载Javascript时，这会导致Javascript失败，从而产生错误Error resolving module specifier: @babel/runtime/regenerator。

我无法理解Mix，Babel和Webpack如何一起工作。我不知道如何告诉Mix / Babel / Webpack生成包含必要模块的文件，或者是否还有其他事情需要我做。

我已经通过谷歌搜索尝试了许多解决方案，使用配置文件，并多次将我的头撞在桌子上。这些都不起作用。我不确定我是否在问正确的问题。

调试信息：

webpack.mix.js看起来像这样：

const mix = require('laravel-mix');

// Use of mix.babel() is imperative as this is legacy code and cannot leverage mix.js()
mix.babel('public/js/helpers.js', 'public/js/processed/helpers.js')
  .babel('public/js/main.js',     'public/js/processed/main.js')
  .babel('public/js/stripe.js',   'public/js/processed/stripe.js');

有问题的Javascript如下所示：

function foo() {
    const bar = document.getElementById('bar');

    bar.addEventListener('click', async (event) => {
        // ('async' is the part which causes the `import` to be added)
    });
}

当穿过Babel时，看起来像这样：

import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(n,e,r,t,o,a,u){try{var c=n[a](u),i=c.value}catch(n){return void r(n)}c.done?e(i):Promise.resolve(i).then(t,o)}function _asyncToGenerator(n){return function(){var e=this,r=arguments;return new Promise(function(t,o){var a=n.apply(e,r);function u(n){asyncGeneratorStep(a,t,o,u,c,"next",n)}function c(n){asyncGeneratorStep(a,t,o,u,c,"throw",n)}u(void 0)})}}function foo(){document.getElementById("bar").addEventListener("click",function(){var n=_asyncToGenerator(_regeneratorRuntime.mark(function n(e){return _regeneratorRuntime.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:case"end":return n.stop()}},n)}));return function(e){return n.apply(this,arguments)}}())}

[当我深入研究Mix的default Babel config时，我认为它正在使用此：

{
    cacheDirectory: true,
    presets: [
        [
            '@babel/preset-env',
            {
                modules: false,
                forceAllTransforms: true
            }
        ]
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-object-rest-spread',
        [
            '@babel/plugin-transform-runtime',
            {
                helpers: false
            }
        ]
    ]
}

Answer 1

改为使用js mixin：

const mix = require('laravel-mix');

mix.js('public/js/helpers.js', 'public/js/processed/helpers.js')
   .js('public/js/main.js',    'public/js/processed/main.js')
   .js('public/js/stripe.js',  'public/js/processed/stripe.js');