淡水网站建设,网站监控怎么做,推广的目的是什么,电子商务网站的建设和维护react如果没有经过配置#xff0c;直接使用decorators装饰器语法会报错#xff1a; Support for the experimental syntax ‘decorators’ isn’t currently enabled 因为react默认是不支持装饰器语法#xff0c;需要做一些配置来启用装饰器语法。
step1:
在 tsconfig.js…react如果没有经过配置直接使用decorators装饰器语法会报错 Support for the experimental syntax ‘decorators’ isn’t currently enabled 因为react默认是不支持装饰器语法需要做一些配置来启用装饰器语法。
step1:
在 tsconfig.json 中启用编译器选项 “experimentalDecorators”: true vscode点击设置输入搜索experimentalDecorators
step2:
安装支持修饰器所需依赖。
yarn add -D babel/core babel/plugin-proposal-decorators babel/preset-env创建.babelrc文件配置
{presets: [babel/preset-env],plugins: [[babel/plugin-proposal-decorators,{legacy: true}]]
}step3:
安装依赖
yarn add -D customize-cra react-app-rewired在项目根目录下创建 config-overrides.js 并写入以下内容覆盖默认配置。
const path require(path)
const { override, addDecoratorsLegacy } require(customize-cra)function resolve(dir) {return path.join(__dirname, dir)
}const customize () (config, env) {config.resolve.alias[] resolve(src)if (env production) {config.externals {react: React,react-dom: ReactDOM}}return config
};
module.exports override(addDecoratorsLegacy(), customize())
step4:
修改package.json文件中 scripts 脚本。
scripts: {start: react-app-rewired start,build: react-app-rewired build,test: react-app-rewired test,eject: react-scripts eject}上面4个步骤配置完成后如果mobx修饰器还是不起作用就可能是mobx版本有问题执行step5。
step5
执行下面命令
yarn add -D mobx5 mobx-react5执行到step5就能成功使用mobx修饰器了。
注意如果报错 Parsing error: Cannot use the decorators and decorators-legacy plugin together 可以创建.eslintrc.js文件配置即可解决eslint报错问题
parserOptions: {parser: babel-eslint,ecmaFeatures: {// 支持装饰器legacyDecorators: true,},},
