我遇到了[[laravel-mix-polyfill包的问题,该包根据我的require
的要求为所有core-js
包插入了browserlist
语句,但它们未由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...
这将在浏览器中引发以下错误:咖啡:3 Uncaught ReferenceError:未定义require感觉事情以错误的顺序发生,因为babel在我的代码中处理import和require语句都没有问题,但是插入的require语句(根据babel docs应该作为导入插入,不确定是否(但相关))在转译时被babel忽略。
复制步骤:
Laravel Mix版本:4.1.4
- 节点版本:v12.10.0
- NPM版本:6.10.3
- OS: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();
还有其他人遇到过这个问题吗?非常感谢您的帮助!
"usage"
用作useBuiltIns
的值。在这种情况下,如您所见,将自动添加polyfill
模块。但是,当您使用Laravel-mix
时,导入模块的文件顶部位置错误。