create-react-app下的@修飾器正確的使用方式記錄

在create-react-app下使用es7的@修飾器會報錯''Support for the experimental syntax 'decorators-legacy' isn't currently enable"
原文地址https://www.jianshu.com/p/b841aee4745f

須要作如下幾步,首先正確安裝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", } 

最後運行便可解決

做者：chouchou723 連接：https://www.jianshu.com/p/b841aee4745f 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。