react（关于装饰器的配置）

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

喵大叔、

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

阅读量391

点赞数 3

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_43990297/article/details/114918321

版权

react 专栏收录该内容

8 篇文章

订阅专栏

在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式

首先安装，以下几个依赖

 	customize-cra
	react-app-rewired
	@babel/plugin-proposal-decorators

yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators

然后在package.json中添加配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "transform-decorators-legacy"
      ]
    ]
  }

再更改package.json中的"scripts"部分

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",![在这里插入图片描述](https://img-blog.csdnimg.cn/20200716165723690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE5MDMwNg==,size_16,color_FFFFFF,t_70#pic_center)

    "eject": "react-app-rewired eject"
  },

然后重点来了，在项目根目录新建config-overrides.js文件，再添加以下配置

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
    addDecoratorsLegacy()
)

这个时候我们便可以开始使用我们的mobx和装饰器了，config-overrides.js文件就是对项目进行自定义配置的文件，可以进行插件配置，具体直接看这个包的官方api,

还有使用vscode的话，vs code提示对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig” 或 “jsconfig” 中设置 “experimentalDecorators” 选项以删除此警告。这样的报错，查看度娘，好多是要下载依赖包，后面发现只要将vscode设置下就行：
Mac下：code-》首选项-》设置
在这里插入图片描述
勾上就欧克了