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

最新推荐文章于 2024-08-06 13:42:42 发布

养只猫

最新推荐文章于 2024-08-06 13:42:42 发布

阅读量815

点赞数 2

分类专栏： react mobx js

本文链接：https://blog.csdn.net/qq_40816649/article/details/100655462

版权

js 同时被 3 个专栏收录

112 篇文章 2 订阅

订阅专栏

react

25 篇文章 1 订阅

订阅专栏

mobx

3 篇文章 0 订阅

订阅专栏

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

在node_modules文件夹中找到babel-preset-react-app里面的create.js找到下面这段代码将之前的false改成{legacy：true}

安装修饰器依赖npm i --save-dev babel-plugin-transform-decorators-legacy

配置babelrc
{
  "presets": ["react", "env", "stage-0"], 
  "plugins": ["transform-runtime", "transform-decorators-legacy"] 
}

重启将项目跑起来。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

养只猫

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

daydream13580130043的博客

05-24

2131

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

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

10-17

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

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

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

try again

09-13

3412

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

react中的装饰器

最新发布

左直拳的马桶_日用桶

08-06

904

（一般来说，装饰器在这里，）在 React 中，装饰器（Decorators）是一种语法糖，用于简化和增强组件的功能。它的主要作用是通过在组件类或类成员（如方法、属性）上添加修饰符，来扩展或修改组件的行为。装饰器通常以 @ 符号开头，紧接着是装饰器函数的名称，并且可以附带参数。@decorator// ...// ...装饰器本质上是一个高阶函数，它接收一个目标（类或类成员）并返回一个新的目标（通常是经过修改后的类或类成员）。装饰器通过操作传入的目标来实现增强或修改其功能。

在 create-react-app 中启用装饰器语法

weixin_34072857的博客

03-20

1060

本文简单介绍了一下如何在 create-react-app 中启用装饰器语法的两种方式。方式一：暴露 create-react-app 的配置暴露出 create-react-app 的所有配置运行命令： $ npm run eject 复制代码项目中就会展示出各种配置文件。在 babel 中添加 plugins 配置在 package.json 文件中找到 babel 的配置，添加如下...

create-react-app中使用装饰器

heartOfblack 离开了电脑，我不希望我还有病

10-01

1015

在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"...

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

weixin_42424269的博客

01-18

481

react-mobx-react-router-boilerplate:A simple boilerplate based on create-react-app and add mobx, react-router, linter, prettier and so on. 一个简单的 react 脚手架依赖于 create-react-app 新增了 mobx react-router,linter,prettier 等

05-06

create-react-app中的所有功能 HMRReact 模拟支持（使用）使用eslint-config-airbnb代替eslint-config-react-app 赫斯基和lint-staged预先提交的lint代码更漂亮埃斯林特 Stylelint 添加.editorconfig 您可以...

create-react-app-typescript:使用create-react-app --scripts-version = react-scripts-ts进行项目配置

05-15

我选择的最重要的原因是，我有在其他项目中使用React和React Native创建许多Web和移动应用程序的经验，并且我选择再次使用RN，尽管尚未在RN中开发移动应用程序时得到证实。未来。在16.3.x生命周期方法。（ v16.3...

e-admin-react:一个使用 react + antd + create-react-app 构建的 rbac 权限模型

05-06

一个使用 react + antd + mobx + create-react-app 构建的 rbac 权限模型账号: admin 密码: 123456 npm 脚本安装依赖 yarn 运行项目 yarn start 构建项目 // 默认打包路由为 history 模式 yarn run build:alpha ...

create-react-app+mobx+react-router-dom

impossible1994727的博客

03-05

464

1、create-react-app步骤：新建一个空文件夹，用vs打开；打开终端输入,安装：npm install -g create-react-app；创建react项目，输入create-react-appreact-cli-demo（react-cli-demo是项目名称，同时确保node版本在9.0以上）；执行上面三步，项目创建完成；运行方式，n...

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

weixin_40222803的博客

08-16

2917

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

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

weixin_33738982的博客

05-30

794

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

mobx的使用及配置装饰器

hs1219462412的博客

06-06

299

package.json文件中修改scripts脚本命令。配置babel插件，开启装饰器功能。

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

weixin_34198583的博客

10-22

186

create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项目里愉快的玩耍. cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, ...

Mobx中装饰器语法的环境配置

Twinkle的博客

11-12

638

1.快速新建一个项目 npx create-react-app mobx-react cd mobx-react yarn eject 报错的话执行以下操作 git add . git commit -m "aa" 2.安装依赖包 yarn add babel-plugin-transform-decorators-legacy @babel/plugin-proposal-dec...

12.mobx 6的安装与使用,启用装饰器语法

RRRRRDong的博客

07-12

463

mobx6的配置及使用

react配置 装饰器@

tby_pr的博客

11-20

349

装饰器@ es8的预案，现在还没通过。【类】组件的。 装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目【默认是不支持装饰器】，需要手动安装相关模块和添加配置文件。安装 npm i -D customize-cra react-app-rewired 修改package.json文件中scripts命令 "scripts": { "start": "react-app-rewired start", "build": "...

react MobX

09-16

1. 创建一个React项目，可以使用create-react-app等工具进行创建。 2. 安装mobx和中间件工具mobx-react-lite，可以使用yarn add mobx mobx-react-lite进行安装。 3. 在代码中使用MobX进行状态管理。MobX提供了简单且...