第四步:支持 react16 的 fragment 语法
这个语法就是 <> </>
,使用方式:
别看用起来很爽,想要babel支持、Eslint校验通过 还是要费些周折啊。下面就来说说怎么折腾😂
版本依赖更新
上图:
注意点
- 参考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 尽早支持啊。
网友评论