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.mzph.cn/diannao/9911.shtml

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

相关文章

服务器内存占用不足会怎么样,解决方案

在当今数据驱动的时代,服务器对于我们的工作和生活起着举足轻重的作用。而在众多影响服务器性能的关键因素当中,内存扮演着极其重要的角色。 服务器内存,也称RAM(Random Access Memory),是服务器核心硬件部…

2024-AIDD-人工智能药物设计-使用的软件包和网络服务器

Python 软件包 化学信息学和结构生物信息学: rdkit: http://rdkit.org/openbabel: https://openbabel.org/mdanalysis: https://www.mdanalysis.org/biopython: https://biopython.org/biopandas: https://biopandas.github.io/biopandas/opencadd: https://openca…

算法-靠谱的车(数位模拟)

import java.util.*; public class Main{public static void main(String[] args){Scanner innew Scanner(System.in);int nin.nextInt(),copyn;// 取每一位上的数放入数组List<Integer> listnew ArrayList<>();while(n!0){int resn%10;list.add(0,res);n/10;}// 转…

回炉重造java----双列集合(HashMap,TreeMap)

体系结构 ①基本操作: ②遍历方式: 第一种: 键找值&#xff0c;通过map.keySet()获取Map的键集合&#xff0c;通过键去匹配Map中的值 Set<String> strings map.keySet();for (String string : strings) {System.out.println(map.get(string));} 第二种: 键值对&…

【linux】vmtouch文件缓存管理工具

目录 vmtouch简介 用法 例子 统计文件或者目录在缓存中的记录 缓存文件到内存 其他类似工具 vmtouch简介 vmtouch是用c语言编写的文件缓存管理工具&#xff0c;适用用于所有类Unix系统。 作用&#xff1a; 1&#xff0c;查看文件系统缓存情况 2&#xff0c;将文件或目…

多个.C文件被编译为一个可执行文件的详细过程

多个.C文件被编译为一个可执行文件的详细过程 文章目录 多个.C文件被编译为一个可执行文件的详细过程前言一、一个.C文件的编译过程二、多个.C文件的链接过程1.文件信息2.链接过程3.makefile 总结 前言 C语言经典的 “hello world ” 程序从编写、编译到运行&#xff0c;看到屏…

【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 多元素控件 | List Widget的说明及介绍 文章编号&#x…

java springboot项目 Linux 启动脚本

start.sh #!/usr/bin/env bashnohup java -jar ../demo.jar --spring.config.location../config/application.yml >../root.log 2>&1 & --spring.config.location 指定配置文件 --server.address 指定服务器的网络地址 stop.sh #!/bin/bash# 停止项目 progra…

pytorch 梯度更新过程

这段代码片段展示了使用 PyTorch 进行模型训练的常见步骤。 optimizer.zero_grad() loss_sum.backward() optimizer.step()在这个代码片段中&#xff0c;假设你已经定义了一个模型&#xff0c;并且有一个损失函数 loss&#xff0c;以及一个优化器 optimizer。 下面是这段代码…

线性表

1.1线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 注&#xff1a; &#xff08;1&#xff09;它是一个序列。元素之间是有顺序的&#xff0c;若元素存在多个&#xff0c;则第一个元素无前驱&#xff0c;最后一个元素无后继&#xff0c;其他元素有且只有一个…

dragonbones 5.6.3不能导出的解决办法

问题描述 使用dragonbones 5.6.3导出资源时无反应。 解决方法 第一步安装node.js&#xff0c;我这里使用的是V18.16.0第二步进入到DragonBonesPro\egretlauncher\server\win目录&#xff0c;然后把里面的node.exe替换为刚刚下载的node文件夹即可&#xff0c;如下图&#xff…

用js操作dom节点的一些方法

一、获取节点 document.getElementById(id); 返回拥有指定 id 的第一个节点 document.getElementsByName(name); 返回带有指定名称的节点集合 document.getElementsByTagName(tagname); 返回带有指定标签名的节点集合 document.getElementsByClassName(classname); 返回带有…

设计模式——命令模式(Command)

在面向对象程序设计的范畴中&#xff0c;命令模式&#xff08;Command Pattern&#xff09;是一种设计模式&#xff0c;它尝试以对象来代表实际行动。具体来说&#xff0c;命令模式将一个请求封装为一个对象&#xff0c;从而使你可以使用不同的请求对客户进行参数化&#xff0c…

Reacet NEXT.js 服务端渲染的优势?

React 和 Next.js 都支持客户端渲染&#xff08;CSR&#xff09;和服务端渲染&#xff08;SSR&#xff09;&#xff0c;而服务端渲染在某些情况下具有一些显著的优势&#xff0c;这些优势包括&#xff1a; SEO 优化&#xff1a;搜索引擎爬虫更容易理解和索引服务端渲染的页面内…

FonePaw Data Recovery for Mac:轻松恢复丢失数据

FonePaw Data Recovery for Mac是一款功能强大的数据恢复软件&#xff0c;专为Mac用户设计&#xff0c;帮助用户轻松恢复因各种原因丢失的数据。该软件支持从硬盘驱动器、存储卡、闪存驱动器等存储介质中恢复丢失或删除的文件&#xff0c;包括照片、视频、文档、电子邮件、音频…

[windows系统安装/重装系统][step-3]装驱动、打驱动、系统激活

重装系统三部曲 [windows系统安装/重装系统][step-1]U盘启动盘制作&#xff0c;微软官方纯净系统镜像下载-CSDN博客 [windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]-CSDN博客 [windows系统安装/重装系统][step-3]装驱动…

数据分析:基于sparcc的co-occurrence网络

介绍 Sparcc是基于16s或metagenomics数据等计算组成数据之间关联关系的算法。通常使用count matrix数据。 安装Sparcc软件 git clone gitgithub.com:JCSzamosi/SparCC3.git export PATH/path/SparCC3:$PATHwhich SparCC.py导入数据 注&#xff1a;使用rarefy抽平的count ma…

web安全之登录框渗透骚姿势,新思路

不管漏洞挖掘还是挖SRC&#xff0c;登录框都是重点关注对象&#xff0c;什么漏洞都有可能出现&#xff0c; 本篇文章做个总结&#xff0c;后面发现新思路后会继续更新 万能密码 or 弱口令 SQL注入 水平越权 垂直越权 逻辑漏洞 短信轰炸 邮箱轰炸 信息泄露 验证码DOS XSS万能密…

12.Netty入门案例

1.引入Netty依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.39.Final</version></dependency> 2.服务端 public class HelloServer {public static void main(String[] arg…

Redis数据结构-Dict

1.3 Redis数据结构-Dict 我们知道Redis是一个键值型&#xff08;Key-Value Pair&#xff09;的数据库&#xff0c;我们可以根据键实现快速的增删改查。而键与值的映射关系正是通过Dict来实现的。 Dict由三部分组成&#xff0c;分别是&#xff1a;哈希表&#xff08;DictHashTa…