create-react-app下的@修饰器正确的使用方式记录
在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下的@修饰器正确的使用方式记录的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [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 ...
- [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 ...
随机推荐
- DataFrame 结构
概念 DataFrame 是表格型的数据结构 ,DataFrame 本质上可以看做是由series 组成的字典, 它既有行索引,也有列索引. 它并不是列表,也不是字典,.
- Python笔记(二十四)_魔法方法_运算符的魔法方法
算数运算方法 .反运算方法 以对象A+对象B为例,都是将A作为self值,而B作为other值传入__add__(self,other)方法: 当用户输入A+B,就会调用重写的add方法: >& ...
- 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/ ...
- Java课堂笔记(三):抽象类和接口
在面向对象一文中,我们说了多态的一个功能是将“做什么”和“怎么做”分离开来,所采用的方法是将不同的具体实现放在不同的子类中,然后向接口中传入一个父类对象的引用.而本篇博客要说的内容则为接口(此处&qu ...
- The Log-Structured Merge-Tree(译)
coming from http://duanple.blog.163.com/blog/static/7097176720120391321283/
- PPT制作,数据图等画图
1. mathcad 画图简单不错 2.三维图 matlab不错 3.PPT 学术ppt,美观明了,思路清晰,数据可视化 学术PPT: http://mp.weixin.qq.com/s/TPYW ...
- [BZOJ3203] [SDOI2013]保护出题人(二分+凸包)
[BZOJ3203] [SDOI2013]保护出题人(二分+凸包) 题面 题面较长,略 分析 对于第i关,我们算出能够打死前k个个僵尸的最小能力值,再取最大值就可以得到\(y_i\). 前j-1个僵尸 ...
- Windows平台网站图片服务器架构的演进
在主流的Web站点中,图片往往是不可或缺的页面元素,尤其在大型网站中,几乎都将面临“海量图片资源”的存储.访问等相关技术问题.在针对图片服务器的架构扩展中,也会历经很多曲折甚至是血泪教训(尤其是早期规 ...
- 关键字static介绍
static关键字 java中针对多个对象有共同的成员变量值得时候,就提供了static关键字来修饰. (1)静态的意思.可以修饰成员变量和成员方法. (2)静态的特点: A:随着类的加载而加载 B: ...
- 刚新建好的动态网站项目,创建jsp页面就报错??
拿到刚刚可以运行的Eclipse,就马上想敲码了,但一创建项目之后再创建jsp页面就报错= =! 报错的内容大概为缺乏对应的jar包. 我们常用Tomcat为中间体,而他本身是带有开发jsp网站的对应 ...