让react项目支持"decorators"装饰器语法

本文介绍了如何在React项目中配置支持Decorator装饰器语法,包括新建项目、安装相关依赖、修改配置文件以解决错误,使项目能够与MobX等状态管理库配合使用。

写在前面;最近在学习ESNext,当学习到装饰器部分时,就需要让项目支持装饰器语法,但是在网上搜索了一番,没有让我成功的。幸好在各种摸索中,我最终还是成功。于是我写下这篇文章,希望对需要它的人有所帮助,同时也是当作自己的一篇笔记。

此次配置我是在react项目中进行配置的,目的是让react项目中的高阶组件支持装饰器语法,当然让它能与mobx配合使用也是我的目的之一。

具体步骤:

一.新建react项目

create-react-app "项目名"
cd "项目名" 

二.安装decorators依赖(如果配合mobx使用,当然也可以安装一下mobx和mobx-react依赖)

npm install --save-dev @babel/plugin-proposal-decorators

三.释放配置文件

npm run eject

注意:在释放配置文件时,可能会报如下错误:
npm run eject报错
解决方法是:

git add .
git commit -m "message"

四.修改package.json文件

将:

"babel": {
    "presets": [
      "react-app"
    ]
}

改为:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
     
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值