-
問題描述:
基于類的組件使用高階組件裝飾器報錯,SyntaxError: D:\workspace\test1\src\components\ReduxTest.js: Support for the experimental syntax 'decorators-legacy'
isn't currently enabled (16:1):
- 解決辦法:
(1)配置了按需加載:
安裝react-app-rewired取代react-scripts,可以擴(kuò)展webpack的配置
npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save
(2)配置按需加載 - 根目錄下創(chuàng)建config-overrides.js

內(nèi)容如下:
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
config = injectBabelPlugin(
// 在默認(rèn)配置基礎(chǔ)上注入
// 插件名,插件配置
["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
config
);
config = injectBabelPlugin(
["@babel/plugin-proposal-decorators", { legacy: true }],
config
);
return config;
};
然后將package.json中scripts下的react-scripts改為eact-app-rewired,如下所示:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
(3)安裝高階組件裝飾器
npm install --save-dev babel-plugin-transform-decorators-legacy
注:我解決問題的步驟是這樣的,有多余步驟未分析,先記錄下,方便后邊修改。
