V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
find456789
V2EX  ›  问与答

想直接在浏览器写 ES6 语法,那么怎么解决低版本浏览器的兼容性问题呢?

  •  
  •   find456789 · 2019-06-01 22:14:38 +08:00 · 4333 次点击
    这是一个创建于 2000 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近我打算弄一个网站

    打算 使用 react+es6 来写

    我是把 react 当成 jQuery 方式来用

    也就是 standalone 方式来使用 react


    高版本的浏览器 是可以支持 es6, 低版本有办法解决吗?

    有没有办法, 用一个 js 判断 浏览器是否支持 es6, 如果不支持,就加载一个文件,让浏览器支持 es6

    如果浏览器支持 es6, 就不额外加载文件

    这样既能恶心低版本的浏览器, 又能让高版本浏览器 用的舒服

    谢谢

    11 条回复    2019-06-03 23:03:30 +08:00
    greatbody
        1
    greatbody  
       2019-06-01 22:24:30 +08:00   ❤️ 2
    直接提示只兼容 chrome
    greatbody
        2
    greatbody  
       2019-06-01 22:24:42 +08:00
    IE 的直接对不起,不支持。。。
    find456789
        3
    find456789  
    OP
       2019-06-01 22:26:46 +08:00
    @greatbody 谢谢,你说的对
    Raincal
        4
    Raincal  
       2019-06-01 22:30:20 +08:00   ❤️ 1
    <script nomodule src="…">
    yixiang
        5
    yixiang  
       2019-06-01 22:30:40 +08:00   ❤️ 1
    不用 babel 的话,也没有 jsx,写着会很痛苦。

    要用 babel 的话,转成 es5 也没啥吧。
    IsaacYoung
        6
    IsaacYoung  
       2019-06-01 22:30:46 +08:00 via iPhone   ❤️ 1
    babal 我记得可以直接引个脚本 就是性能不太好
    cnfczn
        7
    cnfczn  
       2019-06-01 22:31:44 +08:00 via Android
    webpack+babel,祝你好运。我也刚接触这俩,主要用 babel 转译各种 es6 语法,webpack 负责打包。
    lzxgh621
        8
    lzxgh621  
       2019-06-01 22:37:44 +08:00 via iPhone   ❤️ 1
    非商业项目的话
    win10、IE11 访问的让他用 EDGE
    win10 其它浏览器的让他升级
    win10 以下让他换浏览器
    1OF7G
        9
    1OF7G  
       2019-06-01 22:55:44 +08:00   ❤️ 1
    babel-standalone: https://github.com/babel/babel-standalone

    直接在浏览器里编译,React 也顺便可以用 jsx 了。完全不需要提前编译,缺点就是加载时慢一点。

    ```html

    <div id="output"></div>
    <!-- Load Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Your custom script here -->
    <script type="text/babel">
    const getMessage = () => "Hello World";
    document.getElementById('output').innerHTML = getMessage();
    </script>

    ```

    至于低版本才编译,那你可以判断下,然后手动调 babel 的 transform api

    话说,webpack 简单配置一下,用起来也不麻烦。
    tcdw
        10
    tcdw  
       2019-06-01 23:07:38 +08:00 via Android   ❤️ 1
    try {
    new Function('const a = 4'); // 你想要测试的语法
    es6Code();
    } catch (e) {
    es5Code();
    }
    SoloCompany
        11
    SoloCompany  
       2019-06-03 23:03:30 +08:00
    一般而言,只要测试几个 ES6 新增的 internal api 是否存在即可
    比如 Object.entries
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1010 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 22:15 · PVG 06:15 · LAX 14:15 · JFK 17:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.