美文网首页程序员
前端工程搭建入门(四)支持react 16的 fragment语

前端工程搭建入门(四)支持react 16的 fragment语

作者: 文者字清 | 来源:发表于2018-07-21 14:56 被阅读0次

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

    相关文章

      网友评论

        本文标题:前端工程搭建入门(四)支持react 16的 fragment语

        本文链接:https://www.haomeiwen.com/subject/wprhmftx.html