在一个普通的html文件中引入es6

谁践踏了优雅 2022-06-07 04:14 328阅读 0赞

我们在日常开发中,如果我们使用es5则可以直接在浏览器里面写JavaScript脚本。一点问题也没有。

但是在写es6语法的JavaScript代码的时候,我们就需要引入babel翻译器了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/babel">
        class Point {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            toString() {
                return '(' + this.x + ', ' + this.y + ')';
            }
        }
    
        function f() {
            alert('es5的写法');
        }
    
        var p = new Point('横坐标', '纵坐标');
        alert(p);
        const name = '张三';
        alert(name);
        f();
    
        var arrs = [1, 2, 3, 4, 5, 6];
    
        var array = arrs.filter(obj => obj > 3);
    
        console.log(arrs);
        console.log(array);
    </script>
    
    <script src="./node_modules/babel-core/browser.min.js">
    </script>
    
    </body>
    </html>

上面script的标签中的内容是es6语法的写法,class和=>函数。

这样的es6代码在chrome浏览器或者是firefox浏览器亦或是在微软的edge浏览器里面都是可以正常运行的。

但是在一些老旧的浏览器中如ie6是不可以的。需要引入babel的es6翻译器。我们先使用npm将babel下载下来。

敲入命令npm install babel-core@5引入node\_module文件夹下的browser.min.js文件。

就可以了。

发表评论取消回复

表情：

评论列表（有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

相关在一个JS文件中引入另外的一个JS文件

*方案一:使用document.write();** document.write('<script src="katex.js" type="text/javascr...

忘是亡心i/ 2024年04月19日 11:09/ 0 赞/ 77 阅读

相关普通html文件引入es6解析（非webpack）

1，[https://www.cnblogs.com/kiancyc/p/12922564.html][https_www.cnblogs.com_kiancyc_p_1292

拼搏现实的明天。/ 2023年02月12日 09:24/ 0 赞/ 20 阅读

相关 JavaScript:在一个JS文件中引入另外的一个JS文件

![be76a451ce4430e245b18a9efa65a175.png][] 前因 -------------------- 这个问题是因为有很多的H

心已赠人/ 2023年01月09日 12:37/ 0 赞/ 329 阅读

相关如何在 vue 项目中引入 html 文件

这里以 vue-cli3 为例子，在pubilc目录下引入html就行了 ![a6e7327aa71a3e4defb62301f53c52ca.png][] 如果需要查看的

矫情吗；*/ 2022年08月29日 11:59/ 0 赞/ 348 阅读

相关在HTML中引入CSS

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52913051][http_blog.csd

喜欢ヅ旅行/ 2022年07月15日 13:48/ 0 赞/ 300 阅读

相关在HTML中引入JavaScript

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53027539][http_blog.csd

柔情只为你懂/ 2022年07月15日 05:26/ 0 赞/ 271 阅读

相关在HTML中引入JavaScript

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53027539][http_blog.csd

红太狼/ 2022年07月15日 05:26/ 0 赞/ 295 阅读

相关在一个普通的html文件中引入es6

我们在日常开发中,如果我们使用es5则可以直接在浏览器里面写JavaScript脚本。一点问题也没有。但是在写es6语法的JavaScript代码的时候,我们就需要引入ba

谁践踏了优雅/ 2022年06月07日 04:14/ 0 赞/ 329 阅读

相关在HTML页面中引入外部HTML文件的解决方案

在普通的静态html开发过程中，没必要用框架，只想用最基本的方式写几个静态页面出来，但是HTML中没有include语法，每个页面的公共部分都要手动复制粘贴一次，实在不科学……

拼搏现实的明天。/ 2021年09月17日 02:20/ 0 赞/ 481 阅读

相关 html中引入调用另一个html文件总结

参考：[https://www.cnblogs.com/wangyongx/p/9040058.html][https_www.cnblogs.com_wangyongx_p_

偏执的太偏执、/ 2021年08月13日 14:31/ 0 赞/ 559 阅读