laravel-mix-polyfill 需要 babel 未处理的语句答案

【问题标题】：laravel-mix-polyfill require statements not handled by babellaravel-mix-polyfill 需要 babel 未处理的语句
【发布时间】：2020-01-19 05:47:42
【问题描述】：

我遇到了 laravel-mix-polyfill 包插入 require 语句的问题，根据我的browserlist 需要为所有 core-js 包插入 core-js 包，但它们不是由 babel 处理的，并显示在编译后的 es5 代码中，在浏览器中抛出错误。

编译后的代码如下：

"use strict";

require("core-js/modules/es.symbol");

// a lot more requires omitted...

require("core-js/modules/web.url.to-json");

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

/******/
(function (modules) {
  // webpackBootstrap

// etc...

这会在浏览器中引发以下错误：

coffeescript:3 Uncaught ReferenceError: require is not defined

感觉事情发生的顺序错误，因为 babel 在我的代码中处理 import 和 require 语句都没有问题，但是插入的 require 语句（根据babel docs 应该作为导入插入，不确定如果这是相关的）在编译时被 babel 忽略。

复制步骤：

Laravel Mix 版本：4.1.4
节点版本：v12.10.0
NPM 版本：6.10.3
操作系统：macOS Mojave 10.14.6 (18G84)

package.json

{
  "name": "laravel-mix-test",
  "version": "1.0.0",
  "scripts": {
    "dev": "yarn run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "yarn run development --watch",
    "prod": "yarn run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "core-js": "^3.2.1",
    "cross-env": "^5.2.1",
    "css-loader": "^3.2.0",
    "laravel-mix": "^4.1.4",
    "laravel-mix-polyfill": "^1.1.0",
    "sass": "^1.22.12",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  }
}

webpack.mix.js

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

require('laravel-mix-polyfill');

mix.options({
        processCssUrls: false,
        uglify: false
    })
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: "> 0.05%, not ie < 10, safari >= 8",
        corejs: 3
    })
    .js('src/js/app.js', 'public/js/app.js')
    .babel('public/js/app.js', 'public/js/app.js')
    .sass('src/scss/style.scss', 'public/css/style.css')
    .copyDirectory('src/fonts', 'public/fonts')
    .copyDirectory('src/images', 'public/images')
    .disableNotifications();

有其他人遇到过这个问题吗？

非常感谢任何帮助！

【问题讨论】：

标签： javascript ecmascript-6 babeljs polyfills laravel-mix

【解决方案1】：

这是因为您使用"usage" 作为useBuiltIns 的值。在这种情况下，polyfill 模块将自动添加，如您所见。但是当您使用Laravel-mix 时，文件顶部是导入模块的错误位置。

使用"entry" 值，如here 所述。

【讨论】：