2020-03-27
如何在react中使用decorator

decorator目前都需要修改babel才能使用

说一下具体的操作方法 踩了一天的坑。。。

步骤1: yarn create react-app myapp
习惯用yarn npm也行 都一样
 
步骤2: yarn add @babel/plugin-proposal-decorators -D
装依赖!!!
 
步骤3: yarn eject 或者 修改node_modules
先说yarn eject, 将配置文件暴露到项目中
执行完成之后,修改package.json中的babel 修改如下
 
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
 
但是,react的默认配置看的人头晕,如果不想eject
修改 node_modules -> react-scripts -> config -> webpack.config.js
找到 test: /\.(js|mjs|jsx|ts|tsx)$/ 在下面的plugins中加入新的配置 如下红色部分
 
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
babelrc: false,
configFile: false,
presets: [require.resolve('babel-preset-react-app')],
cacheIdentifier: getCacheIdentifier(
isEnvProduction
? 'production'
: isEnvDevelopment && 'development',
[
'babel-plugin-named-asset-import',
'babel-preset-react-app',
'react-dev-utils',
'react-scripts',
]
),
// @remove-on-eject-end
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
大功告成,可以愉快的用decorator了

如何在react中使用decorator的更多相关文章

  1. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  2. react中使用decorator 封装context

    2020-03-27 react中使用decorator 封装context 在传统的react context中,子组件使用context十分繁琐,如果需要使用context的子组件多的话 每个组件 ...

  3. 前端必读2.0:如何在React 中使用SpreadJS导入和导出 Excel 文件

    最近我们公司接到一个客户的需求,要求为正在开发的项目加个功能.项目的前端使用的是React,客户想添加具备Excel 导入/导出功能的电子表格模块. 经过几个小时的原型构建后,技术团队确认所有客户需求 ...

  4. 如何在React中使用CSS3动画

    一.需求 1.在页面添加item时要有渐变效果 2.单击item可删除,带渐变效果 二.代码 1.通过Reacat插件ReactCSSTransitionGroup实现 <!DOCTYPE ht ...

  5. 如何在react中实现一个倒计时组件

    倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...

  6. 如何在react中实现一个table切换?

    废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...

  7. React中使用百度地图API

    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...

  8. 在react中使用intro.js的的一些经验

    react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...

  9. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

随机推荐

  1. day06:三级菜单练习0218

    #1:省份数列:data = { "北京":{ "昌平":{ "沙河":["oldboy","电信" ...

  2. .net System.Web.Mail发送邮件 (设置发件人 只显示用户名)

    http://blog.163.com/hao_2468/blog/static/130881568201141251642215/ .net System.Web.Mail发送邮件 2011-05- ...

  3. Vue基础:子组件抽取与父子组件通信

    在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...

  4. CSS实现漂亮的小水球效果

    先看效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  5. 【数据分析入门】之Spyder中如何让图表单独显示出来

    一般图表只显示在ipython console中,且是静态,无法进行放大,移动等操作解决方案:[win]tools——preferences——ipython console——graphics中ba ...

  6. SVN创建分支的相关操作

    目的是为了在项目中进行相应的功能操作的时候避免项目的报错还能进行还原 1.在相应的位置创建分支 项目过大的只在 功能的位置 进行创建分支 Angular的src 不要在其下面进行创建分支 他有严格的文 ...

  7. pycharm安装Numba失败问题

    相关环境变量: pycharm Python 3.8 pip 19.3.1 Numba各个版本都不行 报错内容: Looking in indexes: https://pypi.tuna.tsing ...

  8. Java 对象的继承,抽象类,接口

    子父级继承 关键字 extends 首先创建一个父类 class Fu { String name; int a=1; public void word() { System.out.println( ...

  9. dsPIC单片机的CAN引脚设置

    用单片机的引脚复用 查询芯片数据手册C1RX的寄存器为RPINR26.C1RXR=(设置为需要用到的引脚) 引脚设置为输入(C1RX),TRIS=1: C1TX需要用的引脚为RPn41,查询数据手册R ...

  10. RabbitMQ镜像集群搭建

    RabbitMQ 官网 https://www.rabbitmq.com/ 小编使用的系统环境是CentOS7.4 系统 IP hostname CentOS7.4 1.1.1.1 hostname0 ...