怎么在react中安装修饰器

怎么在react中安装修饰器

在create-react-app下使用es7的@修饰器会报错

''Support for the experimental syntax 'decorators-legacy' isn't currently enable"

需要做以下几步,首先正确安装babel

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
  }

.babelrc文件配置:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

在pageage.json同级目录新建config-overrides.js并且添加内容

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    // do stuff with the webpack config...
    config = injectBabelPlugin([
        '@babel/plugin-proposal-decorators', 
        { "legacy": true }
    ], config) //{ "legacy": true }一定不能掉，否则报错
    return config;
};

安装react-app-rewired并且修改启动package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

最后运行即可

本文来自React答疑栏目，欢迎学习！

以上就是怎么在react中安装修饰器的详细内容，更多请关注易知道|edz.cc其它相关文章！