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. 蓝桥杯 试题 历届试题 对局匹配 DP解决

    问题描述 小明喜欢在一个围棋网站上找别人在线对弈.这个网站上所有注册用户都有一个积分,代表他的围棋水平. 小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起.如果两人分差 ...

  2. kali中安装漏洞靶场Vulhub(超详细)

    前言 我们都知道,在学习网络安全的过程中,搭建漏洞靶场有着至关重要的作用.复现各种漏洞,能更好的理解漏洞产生的原因,提高自己的学习能力.下面我在kali中演示如何详细安装漏洞靶场Vulhub. 什么是 ...

  3. DEDE自增序号 自动增加数字序号 autoindex属性

    在DEDE的模板制作过程中经常会需要用到1,2,3,4....这样的排序方式,这个时候就需要用到DEDE自带的自增序号产生函数 1.按顺序从1开始 需要使用到 [field:global runphp ...

  4. CSS3和HTML5头部定位自用

    body{ max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 tahoma; color: #000; ...

  5. 粒子群优化算法对BP神经网络优化 Matlab实现

    1.粒子群优化算法 粒子群算法(particle swarm optimization,PSO)由Kennedy和Eberhart在1995年提出,该算法模拟鸟集群飞行觅食的行为,鸟之间通过集体的协作 ...

  6. 抛开 Spring ,你知道 MyBatis 加载 Mapper 的底层原理吗?

    原文链接:抛开 Spring ,你知道 MyBatis 加载 Mapper 的底层原理吗? 大家都知道,利用 Spring 整合 MyBatis,我们可以直接利用 @MapperScan 注解或者 @ ...

  7. 跟着拉大锯大神学Android——网络编程中运行后台服务器端口占用问题

    拉大锯网页地址:https://www.sunofbeach.net/u/1153952789488054272 跟着拉大锯大神学Android,在学到网络编程时,使用了大神搭建的用于学习的后台服务器 ...

  8. 一、【python】机器学习基础

    专有名词 机器学习 (machine learning) 预测分析 (predictive analytics) 统计学习 (statistical learning) 监督学习 (supervise ...

  9. 【MobileNet-V1】-2017-CVPR-MobileNets Efficient Convolutional Neural Networks for Mobile Vision Applications-论文阅读

    2017-CVPR-MobileNets Efficient Convolutional Neural Networks for Mobile Vision Applications Andrew H ...

  10. 动态ip服务器 动态ip服务器的连接方式

    动态IP服务器指的是在需要的时候才进行随机IP地址分配的服务器.所谓动态就是指当你每一次上网时,电信会随机分配一个IP地址,服务器作为我们设为的大脑,拥有自己独立的账户及密码,通过远程连接动态IP服务 ...