怎么在react中安装修饰器

怎么在react中安装修饰器

在create-react-app下使用es7的@修饰器会报错

''Support for the experimental syntax 'decorators-legacy' isn't currently enable"

需要做以下几步,首先正确安装babel

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
  }

.babelrc文件配置:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

pageage.json同级目录新建config-overrides.js并且添加内容

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    // do stuff with the webpack config...
    config = injectBabelPlugin([
        '@babel/plugin-proposal-decorators', 
        { "legacy": true }
    ], config) //{ "legacy": true }一定不能掉,否则报错
    return config;
};

安装react-app-rewired并且修改启动package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

最后运行即可

Image placeholder
前端答疑
未设置
  53人点赞

没有讨论,发表一下自己的看法吧

推荐文章
怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

如何在react加css样式?

react加css的3种方法:1.行内样式直接给对应的DOM元素添加style属性,遵循react的规则,写在{}当中。ThisisPage1!2.声明样式render(){   letmystyle

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

如何在Reworld里随机生成想要的物体

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

如何在 CentOS 中安装 PHP 7.4

本指南提供了在CentOS8/RHEL8Linux系统上安装PHP7.4的步骤。有兴趣的开发者已经可以在生产环境中使用使用PHP7.4,正式版本的官方发布时间为2019年11月28日。 请按照以下步

如何在 CentOS 中安装 PHP 7.4

本指南提供了在CentOS8/RHEL8Linux系统上安装PHP7.4的步骤。有兴趣的开发者已经可以在生产环境中使用使用PHP7.4,正式版本的官方发布时间为2019年11月28日。 请按照以下步骤

如何在 CentOS 中安装 PHP 7.4

本指南提供了在CentOS8/RHEL8Linux系统上安装PHP7.4的步骤。有兴趣的开发者已经可以在生产环境中使用使用PHP7.4,正式版本的官方发布时间为2019年11月28日。请按照以下步骤在

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

怎么在html页面写js css代码

怎么在html页面写jscss代码一、在html中写css代码的方法:1、首先我们看CSS的内联写法,顾名思义就是写在HTML标签内的,如下所示,将css代码写到元素的style属性上。 D

ajax怎么在vue中使用?

ajax怎么在vue中使用?axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用a

怎么看有没有安装react

怎么看有没有安装react一、查看本机是否安装了react的方法●打开cmd输入npmlist-g--dept0有react则已全局安装●进入C:\Users\xxx\AppData\Roaming\

怎么检查react全局安装

怎么检查react全局安装检查react全局安装可以使用npm命令npmlist-g--depth0。按下win+r打开运行,输入cmd打开命令提示符,输入命令即可。C:\Users\Administ

怎么安装react-router

怎么安装react-router安装命令:npminstallreact-routerreact-router路由提供了一些router的核心api,包括Router,Route,Switch等,但是

怎么下载安装react?

1、首先,要安装Node.js及NPM。可以去官网下载最新的版本:https://nodejs.org/下载好之后一直点击下一步,安装完成!!!查看安装情况:按下win+r键打开运行,输入cmd回车,

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props