第四步：支持 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 尽早支持啊。