javascript - laravel-mix-polyfill 需要 babel 未处理的语句
问题描述
我对根据 my 所需的所有包的laravel-mix-polyfill包插入require
语句有问题,但它们不由 babel 处理,并显示在编译的 es5 代码中,在浏览器中引发错误。core-js
browserlist
编译后的代码如下所示:
"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 文档应该作为导入插入,不确定这是否相关虽然)在编译时被 babel 忽略。
重现步骤:
- Laravel 混合版本:4.1.4
- 节点版本:v12.10.0
- NPM 版本:6.10.3
- 操作系统:macOS Mojave 10.14.6 (18G84)
包.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"
as 的值useBuiltIns
。在这种情况下polyfill
,模块将自动添加,如您所见。但是,当您使用Laravel-mix
文件顶部时,导入模块的位置是错误的。
使用此处"entry"
描述的值。
推荐阅读
- python - 我无法再打开 Python 并收到以下错误:“没有安装的调试器启用了即时调试。我能做些什么?
- xaml - Xamarin xaml 绑定
- excel - 在复制另一条数据时在一个单元格中搜索“数字”
- c++ - reinterpret_cast 在 char* 指针上
- python - 按列名和多索引向多索引数据框添加值
- http - 将令牌传递给 GET
- vim - 如何强制 vim 拼写检查器忽略小写/大写错误
- java - Java 8 中的异步方法后跟并行执行的方法
- webview - 相机在 WebView Xamarin.Forms Android 中不起作用
- javascript - YouTube 自动播放在 Chrome 中不起作用