另外,這倆問題是我在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~