另外,这俩问题是我在mobx中应用ES7装璜器语法用到的,用一般的ES6语法是不会碰到这样的问题,嫌麻烦也能够不必装璜器语法,奈何我对这种看上去像Spring正文的语法垂涎已久。
bug1
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
问题出在IDE不意识这个语法 以vscode为例 须要在setting中搜“experimentalDecorators”而后勾选上
bug2
Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (22:4)eslint
问题出在我的项目自身不意识这个语法(以后这个语法还在试验阶段 babel还没有正式公布),这个解决起来略微有点麻烦,翻了很久stackoverflow和github issue,答复都是支支吾吾 遮遮掩掩,故作此篇,以飨前人。
step1:
npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-env
step2:
我的项目根目录下创立.babelrc
{ "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]}
step3:
我的项目根目录下创立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:npm i customize-cra react-app-rewired
step5:
批改package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },
而后重启服务器 再次npm start
bug3
报错 Plugin "react" was conflicted between "package.json ...
而后关上package.json ctrl/command + s 就好啦
(最初这里vscode如果出问题,,重启服务器不论用,能够尝试换了一个IDE 比方webstorm)
happy hacking~