在 create-react-app 命令行构建的 React 项目中使用 Mobx 会出现如下警告:

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (9:5):

需要启用 ESNext 的装饰器 (命令行中执行 mac 端)

  1. 先 git add .
  2. git commit -am "Save before ejecting" (然后(注意这里是 am)
  3. npm run eject
  4. npm install --save-dev babel-plugin-transform-decorators-legacy (安装该模块中间可能有告警自行消除即可)
  5. npm install --save-dev @babel/plugin-proposal-decorators
  6. npm install --save-dev @babel/plugin-proposal-class-properties
  7. 在 package.json 里修改 babel 如下所示
"babel": {
"plugins":[
[
"@babel/plugin-proposal-decorators",
{
"legacy":true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose":true
}
]
],
"presets":[
"react-app"
]
},

按照以上步骤就可以开心的使用 Mobx

create-react-app 构建的项目使用 mobx (说到底就是为了使用装饰器语法对 babel 做些配置的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. react mobx 装饰器语法配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...

  9. 在eclipse中构建solr项目+添加core+整合mysql+添加中文分词器

    最近在研究solr,这里只记录一下eclipse中构建solr项目,添加core,整合mysql,添加中文分词器的过程. 版本信息:solr版本6.2.0+tomcat8+jdk1.8 推荐阅读:so ...

随机推荐

  1. 浅谈Javascript数据属性与访问器属性

    ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...

  2. 插入数据库失败([Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version)

    报错信息如下: , ) 原因,read是数据库的关键字, 牢记,如果一个词是数据库的关键字,那么在写数据库语句的时候,这个词一定是蓝色的(关键字颜色)!!

  3. 使用Jenkins结合Gogs和SonarQube对项目代码进行测试、部署、回滚,以及使用keepalived+haproxy调度至后端tomcat

    0 环境说明 主tomcat:192.168.0.112 备tomcat:192.168.0.183 haproxy+keepalived-1:192.168.0.156 haproxy+keepal ...

  4. 大数据计算引擎之Flink Flink状态管理和容错

    这里将介绍Flink对有状态计算的支持,其中包括状态计算和无状态计算的区别,以及在Flink中支持的不同状态类型,分别有 Keyed State 和 Operator State .另外针对状态数据的 ...

  5. android中的rn项目更新gradle及补充二

    修改build.gradle的版本,com.android.tools.build:gradle:2.1.0, 改为更高的,然后更改gradle/wrapper/gradle-wrapper.prop ...

  6. vue项目报错1 Vue is a constructor and should be called with the `new` keyword && jquery.js?eedf:3850 Uncaught TypeError: this._init is not a function...

    Vue is a constructor and should be called with the `new` keyword Uncaught TypeError: this._init is n ...

  7. Linux连接外网~可以Windows与Linux互ping通~图文

    我这里用的是CentOS7_1511 下载地址 http://linux.xitongxz.net:808/201603/CentOS-7-x86_64-DVD-1511.iso 选择 虚拟机左上角 ...

  8. 进制转换以及byted与str的区别

    二进制与十六进制数之间的转换 https://jingyan.baidu.com/article/47a29f24292608c0142399cb.html byted与str的区别 https:// ...

  9. yaourt

    https://blog.csdn.net/relcodego/article/details/50531379 https://blog.csdn.net/lsvtogergo/article/de ...

  10. GNU ARM汇编快速入门

    以前用ARM的IDE工具,使用的是ARM标准的汇编语言.现在要使用GNU的工具,当然要了解一点GNU ARM汇编的不同之处.其实非常的简单,浏览一下文档然后再看看程序就完全可以搞定了,或者你硬着头皮看 ...