第四步：支持 react16 的 fragment 语法
这个语法就是 <> </> ，使用方式：
react fragment语法简写方式
别看用起来很爽，想要babel支持、Eslint校验通过 还是要费些周折啊。下面就来说说怎么折腾😂
版本依赖更新
上图：
babel依赖版本升级
注意点
- 参考react官方文档 得知babel 7 才开始支持 react fragment 语法解析，而 babel 7 开始使用 @babel/core 这种形式的包，其他核心依赖包也采用此形式（别问我怎么知道的，我是一个一个试出来的🤣），因此要把 preset 相关都升级，然后解析就没问题了。
- Eslint 校验怎么搞？根据上面的文档也有提到，目前支持 fragment 校验的只有 babel-eslint ，先安装 babel-eslint ，然后在 .eslintrc 里面加上
"parser": "babel-eslint"，变成了这个样子：
提示字符串必须用单引号
这只是折行啊，怎么变成字符串了😱？我猜测是 babel-eslint 支持的也不是很好，然后就各种查文档，google，百度，也没有找到解决方法。最后只能硬着头皮自己搞吧，既然提示字符串必须是单引号，那我就把引号的rules去掉吧，使用默认值即可，果然完美解决😆
image.png - .eslintrc 配置
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"semi": [
"error",
"always"
],
"no-console": "warn"
}
}
还是坐等 eslint 尽早支持啊。
