npm run build 时出现语法报错 Module parse failed: Unexpected token

错误原因

出现这个错误一般是你使用了或者引用的包里出现了ES6的语法,但是你的webpack可能是4.x或者更低版本的,

这时候单靠webpack本身无法识别ES6的语法,但是升级webpack到5可能会与现有的代码产生兼容性问题,因此就需要引入babel插件,将ES6的语法进行转换。

常见ES6语法有 ??、??=、?.、?: 等等。

Module parse failed: Unexpected token (46:45)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file

引入插件

执行一下三个命令,注意如果出错,请去npm官网找到最高的兼容webpack4的版本安装即可。

npm install @babel/core
npm install babel-loader@8.3.0
npm install @babel/preset-env

配置babel-loader

在webpack.base.conf.js中添加如下内容

{test: /\.js$/,use: {loader: 'babel-loader',options: {// 使用 Babel 中的 @babel/preset-env 预设presets: ['@babel/preset-env',]}}}

在这里插入图片描述

结果

此时重新 npm run build 应该就好了,但是请注意,为了保险点,最好手动把之前的dist目录删除,避免缓存问题导致build后运行还是出错。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/685599.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习网络需要认识的各种设备

网桥(bridge) 网桥工作在数据链路层,可以把多个局域网连接起来,组成一个更大的局域网 以太网中,数据链路层地址就是mac地址,网桥与集线器的区别就是,网桥会过滤mac,只有目的mac地址…

Python远程连接Linux执行操作

一、任务要求 要使用Python编写代码来远程给Linux主机上传一个文件,可以使用paramiko库,这是一个实现了SSHv2协议的Python库,它支持SSH连接(包括客户端和服务端),并且提供SFTP(SSH File Transf…

如何创建window11虚拟机,超详细!!!

为什么要创建window11虚拟机,有了虚拟机,可以避免一些软件的危害,我们可以在虚拟机里,测试软件的安全性。当然你也可以在虚拟机里体验下流氓软件带来的快乐。众所周知,流氓软件会修改默认浏览器,将几款流氓…

财务管理|基于SprinBoot+vue的财务管理系统(源码+数据库+文档)

财务管理系统 目录 基于SprinBootvue的财务管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 1管理员功能模块 2员工功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&#xff1…

孔板流量计和孔板流量计真的不一样

孔板流量计和孔板流量计真的不一样,无论您是追求品质,还是注重实用功能,我们的产品都能让您心动不已。让您轻松享受到现代科技所带来的便利,尽情展现自己不一样的魅力。 用途【1-5-9】 孔板流量计为煤矿瓦斯抽放而设的计算瓦斯抽…

linux grep命令搜索指定路径

在Linux开发的过程中grep这个搜索命令,是必不可少的存在。它可以快速的搜索出来我们需要的关键字所在的位置。 有助于我们快速分析定位问题。 下面,分享一个简单实用的小技巧。 原始grep 最终grep grep过滤掉二进制的文件 -I选项 结论 这样子是不…

C++ Builder XE EnumWindowsProc遍历所有窗口的名称

BOOL CALLBACK EnumWindowsProc(HWND hwnd, LPARAM lParam) { // 这里可以添加你的处理逻辑 // 例如,将句柄添加到列表中或者其他操作 // 这里我们仅仅输出到调试窗口 OutputDebugString(L"枚举窗口句柄: "); char windowHandle[10];…

中信证券:量子产业蓄势待发,看好相关投资机会!

在1994年,数学家彼得肖尔(Peter Shor)首次提出了现在广为人知的肖尔算法,那时许多人认为量子计算机的概念遥不可及、纯属幻想。然而,到了2024年,全球正深入探讨量子科技在现实世界的应用,以及所…

GPU云渲染平台选择应该看什么?瑞云渲染带你了解

在选择GPU云渲染平台时,关键的考量因素包括渲染速度、支持的软件兼容性、价格性价比以及用户服务质量。了解这些指标将帮助用户在众多选项中做出明智的选择,以优化渲染效率和成本效益。 一、GPU与渲染有什么关系 GPU与渲染有着密切的关系,在…

低通、高通、带通滤波器

滤波器作为一种选频装置,是信号处理中的一个重要概念。目前主要有低通滤波器、高通滤波器和带通滤波器三种。以下是低通、高通、带通滤波器的原理详述。 1.低通滤波器 电感阻止高频信号通过而允许低频信号通过,电容的特性却相反。信号能够通过电感的滤…

SliderCaptcha滑块验证码功能

SliderCaptcha滑块验证码功能 资源文件及文档&#xff1a;https://gitee.com/LongbowEnterprise/SliderCaptcha <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><…

广州融资融券两融利率最低是多少?融资融券什么意思?运作机制为何?

融资融券的利率会根据投资者的资金量、交易频率以及与券商的协商情况一般有所不同。广州融资融券两融利率最低可以达到4.0~5%&#xff0c;这是市场融资融券利率的最低标准。各家证券公司的融资融券利率存在差异&#xff0c;通常需要联系证券公司工作人员客户经理申请办理。 证…