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

最新推荐文章于 2024-06-18 17:08:25 发布

搬砖男子汉

最新推荐文章于 2024-06-18 17:08:25 发布

阅读量2.5w

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/u013803262/article/details/78192349

版权

javascript 专栏收录该内容

30 篇文章 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>
<!--敲入命令 npm install babel-core@5 引入 babel(es6的翻译器)-->
<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文件。

就可以了。

搬砖男子汉

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
在一个普通的html文件中引入es6

我们在日常开发中,如果我们使用es5则可以直接在浏览器里面写JavaScript脚本。一点问题也没有。但是在写es6语法的JavaScript代码的时候,我们就需要引入babel翻译器了。html>lang="en"> charset="UTF-8"> Titletype="text/babel"> class Point { cons
复制链接

扫一扫

专栏目录