create-react-app中使用装饰器

最新推荐文章于 2025-06-10 16:15:21 发布

letMeAlone_

最新推荐文章于 2025-06-10 16:15:21 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/a250758092/article/details/82916830

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Create-React-App项目中启用装饰器语法，通过安装特定的Babel预设和修改配置文件，使React应用能顺利使用装饰器特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在create-react-app中使用装饰器

create-react-app ExampleApp

npm run eject


npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev

根目录下创建.babelrc 并添加
{ "presets": ["react-native-stage-0/decorator-support"] }

最后再执行一下 npm install命令，跑起来npm start即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

letMeAlone_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何在create-react-app里使用@装饰器

daydream13580130043的博客

05-24

2204

问题描述：由于create-react-app目前还没有添加装饰器，直接用的话会报错，但项目中不得不使用装饰器，比如引入MobX。解决方法：我们可以根据奥卡姆剃刀原理以及鸵鸟算法 => 不使用装饰器 @observer class A {} //等价于 const A = observer(class A {}); @action function f () { } // ...

create-react-app配置别名和装饰器并使用

少吃点肉的博客

03-22

839

create-react-app为我们封装好了webpack并且隐藏了起来，而日常开发中我们想修改webpack配置别名和装饰器该如何操作呢？ 1.安装customize-cra和react-app-rewired yarn add customize-cra react-app-rewired 2. 根目录创建config-overrides.js并安装装饰器插件@babel/plugin-proposal-decorators yarn add @babel/plugin-proposa.

参与评论您还未登录，请先登录后发表或查看评论

在create-react-app中使用装饰器

weixin_42424269的博客

01-18

509

21、Create React App的使用

最新发布

编程是一门实践技术

06-10

559

可以使用npx， npm， yarn指令都可以，这里先以npx为例说明安装完成后，可使用以下指令来操作工程工程结构调试开发在 WebStorm 菜单 Run 中选择 Edit Configurations…。然后单击 + 并选择 JavaScript Debug。将 http://localhost:3000 粘贴到 URL 字段并保存配置。这是一种正常引用的方式模块化csss文件就是[name].module.css 这样命名，然后react有一个自动绑定的功能解决重复导入问题可以比如

create-react-app下的@修饰器正确的使用方式记录

weixin_34342578的博客

05-22

248

在create-react-app下使用es7的@修饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't currently enable"原文地址https://www.jianshu.com/p/b841aee4745f 需要做以下几步,首先正确安装babel "devDependencies": ...

让react-create-app 支持@装饰器函数类

峰会路转的博客

03-21

279

我们在使用react-redux插件时候，connect函数的一般用法上面的写法是可以的，没问题的，但是B格方面略低了一点，于是我们用到了es7的装饰器函数@connect 不进行相关配置的话，会报错syntax 'decorators-legacy' isn't currently enabled 于是我们要进行以下的配置 "@babel/plugin-proposal-class-properties":"^7.13.0", "@babel/plugin...

create-react-app 支持 装饰器 decorator

weixin_30414155的博客

11-24

244

网上常见方法全是安装babel-plugin-transform-decorators-legacy 然后添加babel配置的，实际情况是最新版本的create-react-app 生成的项目已经是基于babel7了，所以我们需要安装 @babel/plugin-proposal-decorators 替换旧版的babel-plugin-transform-decorators-leg...

详解create-react-app 2.0版本如何启用装饰器语法

10-17

主要介绍了详解create-react-app 2.0版本如何启用装饰器语法，cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的

create-redux-app:用于React和Redux的简单样板代码

05-16

我可以使用装饰器吗？与API后端集成节点 Ruby on Rails 在开发中代理API请求在开发中使用HTTPS 在服务器上生成动态<meta>标记预渲染为静态HTML文件将数据从服务器注入页面运行测试文件名约定命令行...

启用ES7的修饰器语法 create-react-app 支持修饰器

weixin_40222803的博客

08-16

2961

先npm run inject暴露webpack 我们用create-react-app创建的项目时，并不能使用修饰器语法修饰器语法是ES.next 2阶段特性。我在使用mobx时需要用@observable让属性被观测和组件观测变化@observer 使用路由时需要withRouter将路由信息传递个组件的props对象上等都需要用到修饰器语法。 npm run inject启动后...

create-react-app下的@装饰器正确的使用方式记录

XLL20001022的博客

07-26

307

在create-react-app下使用@装饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't currently enable" ⾼阶组件本身是对装饰器模式的应⽤，⾃然可以利⽤ES7中出现的装饰器语法来更优雅的书写代码。 yarn add @babel/plugin-proposal-decorators yarn add customize-cra 更新confifig-overrides.js //配置完

create-react-app开启装饰器来使用mobx

qq_40816649的博客

09-09

851

在学习mobx状态管理工具的时候遇到了编译过程@装饰器无法通过编译的错误Support for the experimental syntax 'decorators-legacy' isn't currently enabled 试了各种方法安装修饰器依赖都没有成功，后面去修改了babel-preset-react-app这个依赖包的源码终于解决了这个问题在node_modules文件夹中找...

react 应用中使用装饰器

openglnewbee的博客

03-12

3895

1. 在不eject的情况下，网友给出了一个修改node_modules的解决方案：找到node_modules/babel-preset-react-app/index.js，然后加入装饰器支持;接着在对应的package.json下边加入babel-plugin-transform-decorators-legacy。总结：node_modules/babel-preset-react-ap...

create-react-app中使用装饰器（@）写法

weixin_33738982的博客

05-30

823

1.配置ant-design的按需加载，链接为：ant.design/docs/react/…；2.不需要执行npm run eject命令，执行以下两步：（1）执行npm i@babel/plugin-proposal-decorators -D命令；（2）将config-override.js写入下图所示代码：...

create-react-app 创建react项目

y1s2y3的博客

08-03

177

1. 搭建好react的环境 2. 创建react的项目 create-react-app demo 3. 在package.json里添加"homepage"./" (注意后面的双引号里面的点号，----这个点花费了我很长的时间才弄对。) 4. 使用yarn start启动项目或者yarn build打包项目 ...

create-react-app+mobx（+装饰器）+antd 一步一步搭建过程

try again

09-13

3464

全局安装 npm install -g create-react-app yarn //yarn 这是一个类npm 的管理工具挺好用的安装包可以离线安装安装过一次不需要重复请求外网 create-react-app 你的项目名字 //创建项目然后开始安装配置和工具下面是antd官方网站引入的解释和步骤详情自己看下就好了很简单的 //安装antd ui库 y...

React装饰器配置

起风了

05-08

239

配置装饰器 一、安装依赖 yarn add @craco/craco craco-less yarn add @babel/plugin-proposal-decorators 二、新建config-overrides.js添加下面的话进行配置 const { override,addDecoratorsLegacy } = require('customize-cra') module.exports = override( addDecoratorsLegacy() ) 三、重启项目 ..

react 装饰器配置

annier_11的博客

11-24

1178

使用Create React App创建一个新的项目后，可以如下配置装饰器 1.安装@babel/plugin-proposal-decorators npm i @babel/plugin-proposal-decorators 2.npm i react-app-rewired customize-cra 3.修改package.json "scripts": { "start": "react-app-rewired start", "build": "react-a...

react（关于装饰器的配置）

weixin_43990297的博客

03-17

393

在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式首先安装，以下几个依赖 customize-cra react-app-rewired @babel/plugin-proposal-decorators yarn add customize-cra react-app-rewired @babel/plugin-p

自定义create-react-app配置工具custom-react-scripts已弃用

这些特性允许开发者在项目中使用一些较为前沿或特定的开发实践，而无需担心与create-react-app的默认行为冲突。【create-react-app 2.x的自定义配置】对于create-react-app的2.x版本，定制化需求可以使用自定义...