webpack配置react项目，无法使用箭头函数

最新推荐文章于 2020-03-20 11:31:19 发布
最新推荐文章于 2020-03-20 11:31:19 发布
阅读量3.1k 收藏 1
点赞数 2
分类专栏： webpack 文章标签： webpack 箭头函数 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckyFBB/article/details/84633650
版权

今天使用自己配置的webpack做开发的时候，发现不能使用箭头函数，错误原因Unexpected token。
在这里插入图片描述
我的.babelrc文件长这样子
在这里插入图片描述
在这个文件中，我没有配置stage-0。然而使用箭头函数和stage-0有关，他一定要放在后面。它包含了对ES6以及7的所有支持， 包括那些还没有定下的功能。

解决方案

安装stage-0，执行 npm install --save-dev babel-preset-stage-0
修改.babelrc如下图
在这里插入图片描述

LuckyFBB
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack搭建react项目，箭头函数报错：Unexpected token
weixin_42260975的博客
07-01 1876
webpack搭建react项目，箭头函数报错：Unexpected token 今天在webpack搭建的react项目中，写了一个小demo，想要使用箭头函数，但是运行报错，解决方法如下： 报错 解决办法 我的 .babelrc 文件内容 { "presets": ["react", "es2015"], "plugins": [["import", { "libraryName": ...
webpack配置
Heartbroken_man的博客
08-30 705
webpack搭建项目基础篇 一.创建项目 首先在终端cd到你的项目根目录，使用npm init创建package.json文件， 在你创建好的package.json文件里面的scripts字段那里新增这样一行，配置一下webpack执行的文件路径，同时创建一下webpack.config.js文件放在项目根目录下面 我们使用yarn add webpack webpack-cli安装一下webpack和webpack-cli两个依赖 （没有安装yarn的话可以使用npm或者cnpm，当然
箭头函数写法在ReactJs中的使用
热门推荐
莫雪狼的专栏
06-05 1万+
欢迎使用Markdown编辑器写博客ES7中的箭头函数写法真的是很方便，而现今ReactJs又非常流行而且好用，非常适合有Java面向对象经验的同学学习和使用，在使用Reacjs构建组件时，如果想要使用箭头函数写法定义函数该怎么办呢？ 首先，如果你直接在React组件中使用箭头函数写法定义函数，编译是不会通过的，会报出语法错误。 ERROR in ./modules/Repos.js Module
react ice-design ie兼容问题，由于ie浏览器不支持箭头函数，导致react项目在ie中不兼容的解决办法
Chris__wang的博客
09-26 1981
解决办法：1. package.json中的ice-script更新为1.7.2-beta.1                   2. 将启动脚本改为  start:ice dev --disabled-reload=true                   3. 保存，重启项目 【右上角点个赞，谢谢】...
react、taro事件处理之间区别
flykus的博客
08-29 1198
1、taro创建自定义组件中，事件处理函数的方法与this： class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; } onClick = (e) => { e.stopPropagation(...
浅谈箭头函数写法在ReactJs中的使用
10-19
然而，直接在React组件内部使用箭头函数可能会遇到编译错误，因为默认情况下，React项目可能不支持ES6及以上的特性，比如箭头函数。 在ES6中引入的箭头函数，其语法结构简洁明了，例如： ```jsx handleSubmit = ()...
create-react-app：基于Webpack自定义React脚手架
02-06
这样，你可以使用最新的JavaScript特性，如箭头函数、模板字符串、类等，而不必担心浏览器兼容性问题。 **样式处理** `create-react-app`支持CSS Modules和CSS-in-JS解决方案，如styled-components。你可以在组件...
基于react+es6+webpack的项目架构模板
02-18
ES6，也称为ECMAScript 2015，是JavaScript语言的一个重要更新，引入了许多新特性，如类和模块系统、箭头函数、Promise对象、解构赋值、模板字符串等。这些特性使得代码更简洁、易读，同时也提高了开发效率。在React...
webpack 搭建react环境
01-20
ES6（ECMAScript 6）是JavaScript语言的最新版本，引入了许多新特性，如箭头函数、类、模块导入导出等，这些特性在React开发中非常常用。React则是一个用于构建用户界面的库，特别是单页应用（SPA）。 **搭建React...
React的箭头函数详解
ZPHTTT的博客
12-07 9442
基本用法： ES6中允许使用“箭头”(=>)定义函数 var f   = v => v; 上面代码相当于： var f = function( v )  {     return v; } 根据箭头函数有参数和无参数来区分 1、无参数的箭头函数 var f = () => 5; 等同于 var f = function() { return 5}; 2、有参数...
react方法使用尖头函数报错
web杉杉
01-09 527
在使用react的过程中遇到了使用箭头函数时出现报错的情况 inputChange = () => { console.log(/a/); } 是因为这种使用方法还是一个实验性的，所以要处理这种问题需要安装一个依赖包 npm install @babel/plugin-proposal-class-properties 然后在.babelrc文件中加入以下代码 ...
解决webpack3中JS箭头函数报错
AllanJane
02-01 3685
es6 箭头函数 react 中 报错
webpack转化es6语法
Sely_Lou的博客
03-20 552
1.安装babel babel转换高语法到es5 babel-loader转换 @babel/core是核心模块@babel/preset-env 高级语法转换成低级语法 yarn add babel-loader @babel/core @babel/preset-env -D 2.配置js 在配置规则前，es6语法打包，会直接是箭头函数 配置后，函数会使用var进行打包 ...
babel 在编译箭头函数时报 "Unexpected token" 问题
weiqi的博客
05-06 7879
babel 在编译箭头函数时报错问题今天在用webpack打包时遇到了如下错误：Module build failed: SyntaxError: D:/workspace/vs/simple-database/app/containers/App.jsx: Unexpected token (86:7) 84 | } 85 | > 86 | test = () => {
webpack+react+antd项目编写过程中遇到的问题
xyr05288的专栏
08-01 4339
一. webpack配置项目自动编译，页面自动刷新var path = require("path"); var webpack = require("webpack"); var CSS_PATH = path.resolve(__dirname, 'css'); var UglifyJSPlugin = require('uglifyjs-webpack-plugin'); var HtmlWe
react 箭头表达式
fwk19840301的博客
05-02 2209
基本用法ES6 允许使用“箭头”（=>）定义函数。var f = v => v; // 等同于 var f = function (v) { return v; }; 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (...
Webpack打包常见问题与报错
liuxin_1991的博客
12-21 2287
Webpack打包常见问题与报错 一、css中设置的背景图片找不到了，或者是url路径不对？ 解决办法： 1、下载url-loader npm install --save-dev url-loader 2、 webpack.config.js中 module.exports = {  module: {    rules: [
在react jsx中，为什么使用箭头函数和bind容易出现问题
weixin_33720956的博客
09-04 727
在之前的文章中，已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做。 现在来一些例子吧。 在这个例子中，我们通过使用一个箭头函数(=>)来bind用户ID到每个删除按钮中。 ## index.js imp...
【react】使用箭头函数创建组件类内方法，这样就无需在constructor中给自定义的方法绑定this
u014458962的专栏
02-21 1347
也就是说，加入我要创建一个handleSubmit 方法，我有两种写法： 写法1 export default class CommentAdd extends Component{ constructor(props){ super(props); this.handleSubmit = this.handleSubmit.bind(this); } ...
webpack入门与配置解析
- ES6：JavaScript的新特性，如箭头函数、类等。 - TypeScript：强类型JavaScript的超集，提供更好的类型检查。 - Flow：Facebook推出的静态类型检查工具。 - SCSS或LESS：CSS预处理器，提供变量、嵌套规则等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值