在create-react-app下使用es7的@修饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't currently enable"
原文地址https://www.jianshu.com/p/b841aee4745f

需要做以下几步,首先正确安装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",
}

最后运行即可解决

作者:chouchou723
链接:https://www.jianshu.com/p/b841aee4745f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

create-react-app下的@修饰器正确的使用方式记录的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

随机推荐

  1. DataFrame 结构

    概念 DataFrame 是表格型的数据结构 ,DataFrame 本质上可以看做是由series 组成的字典, 它既有行索引,也有列索引.  它并不是列表,也不是字典,.

  2. Python笔记(二十四)_魔法方法_运算符的魔法方法

    算数运算方法 .反运算方法 以对象A+对象B为例,都是将A作为self值,而B作为other值传入__add__(self,other)方法: 当用户输入A+B,就会调用重写的add方法: >& ...

  3. linux(centos7.0以上)下对mysql数据库的导入导出

    1:查看mysql安装路径: 指令 ps -ef|grep mysql 得出结果 root 968 1 0 18:25 ? 00:00:00 /bin/sh /usr/local/mysql/bin/ ...

  4. Java课堂笔记(三):抽象类和接口

    在面向对象一文中,我们说了多态的一个功能是将“做什么”和“怎么做”分离开来,所采用的方法是将不同的具体实现放在不同的子类中,然后向接口中传入一个父类对象的引用.而本篇博客要说的内容则为接口(此处&qu ...

  5. The Log-Structured Merge-Tree(译)

    coming from http://duanple.blog.163.com/blog/static/7097176720120391321283/

  6. PPT制作,数据图等画图

    1. mathcad  画图简单不错 2.三维图 matlab不错 3.PPT  学术ppt,美观明了,思路清晰,数据可视化 学术PPT: http://mp.weixin.qq.com/s/TPYW ...

  7. [BZOJ3203] [SDOI2013]保护出题人(二分+凸包)

    [BZOJ3203] [SDOI2013]保护出题人(二分+凸包) 题面 题面较长,略 分析 对于第i关,我们算出能够打死前k个个僵尸的最小能力值,再取最大值就可以得到\(y_i\). 前j-1个僵尸 ...

  8. Windows平台网站图片服务器架构的演进

    在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规 ...

  9. 关键字static介绍

    static关键字 java中针对多个对象有共同的成员变量值得时候,就提供了static关键字来修饰. (1)静态的意思.可以修饰成员变量和成员方法. (2)静态的特点: A:随着类的加载而加载 B: ...

  10. 刚新建好的动态网站项目,创建jsp页面就报错??

    拿到刚刚可以运行的Eclipse,就马上想敲码了,但一创建项目之后再创建jsp页面就报错= =! 报错的内容大概为缺乏对应的jar包. 我们常用Tomcat为中间体,而他本身是带有开发jsp网站的对应 ...