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. XXX_ProductCRUD的项目结构与配置文件

    MVC_ProductCRUD                                                       Hibernate_ProductCRUD 项目结构    ...

  2. Node.js NPM Tutorial

    Node.js NPM Tutorial – How to Get Started with NPM? NPM is the core of any application that is devel ...

  3. Linux上,最常用的一批命令解析【10年精选】

    原文链接:https://mp.weixin.qq.com/s/QkqHexs_kOgy_5OwbwyFww 建议点击原文链接查看 不同平台linux客户端连接工具分享: windos终端神器:SSH ...

  4. 用python selenium 单窗口单IP刷网站流量脚本

    近期有朋友说需要增加自己网站的流量,故用python写了一个简单的脚本,配合IP池或者动态IP都可以刷,当然最爽的是单窗口单IP. 说明 作弊可耻! 环境 python3.8 + selenium + ...

  5. Mysql创建修改删除-表

    创建表之前要链接到库  例如  库名为 student use student; 连接结束可以查看此库中所有表 show tables; 创建表 create table student( id in ...

  6. Collection接口和list,set子类

    Collection接口常用的子接口有:List接口.Set接口List接口常用的子类有:ArrayList类.LinkedList类Set接口常用的子类有:HashSet类.LinkedHashSe ...

  7. 括号树 noip(csp??) 2019 洛谷 P5658

    洛谷AC通道 本题,题目长,但是实际想起来十分简单. 首先,对于树上的每一个后括号,我们很容易知道,他的贡献值等于上一个后括号的贡献值 + 1.(当然,前提是要有人跟他匹配,毕竟题目中要求了,是不同的 ...

  8. [代码片段-C#]工具代码片段 及 版本信息等

    标题: [SD.TEAM]XXXX 公司: 宝宝巴士(福建)网络科技有限公司 商标: 宝宝巴士 版权: © Babybus SD.Team 版权+作者(简): © Babybus SD.Team - ...

  9. 读Pyqt4教程,带你入门Pyqt4 _013

    你是否曾经看着应用程序并思考特定的GUI项是如何产生的?大概每位程序员都这样过.然后你能看到你喜欢的GUI库提供的一系列窗口组件,但是你无法找到它.工具包通常仅仅提供最常用的窗口组件,比如按钮.文本组 ...

  10. 如何减小SRAM读写操作时的串扰

    静态存储器SRAM是一款不需要刷新电路即能保存它内部存储数据的存储器.在SRAM 存储阵列的设计中,经常会出现串扰问题发生.那么要如何减小如何减小SRAM读写操作时的串扰,以及提高SRAM的可靠性呢, ...