前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ECMAScript6基础学习教程(一)运行ES6代码

ECMAScript6基础学习教程(一)运行ES6代码

作者头像
娜姐
发布2022-05-13 14:30:11
7230
发布2022-05-13 14:30:11
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端

目前,浏览器JavaScript引擎还没有全盘支持ES6语法(Chrome情况会好些,但依旧没有支持所有的ES6新特性),所以,我们依旧需要使用ES6转码器,将ES6语法转为ES5语法,再在浏览器中运行。

最流行,最推荐的ES6转码器是Babel。

无论是React,亦或Vue,Angular2,无一例外的使用了Babel来支持ES6特性,通过webpack这个模块化和项目构建工具来编译ES6。

那么,如果只是学习,如何利用Babel运行ES代码呢?

1. 单独运行JS文件

单独运行某个含有ES6语法的JS文件,步骤如下:

  1. 安装Babel命令行工具和相关包 npm install --global babel-cli npm install --save babel-preset-es2015
  2. 在当前目录下新建配置文件.babelrc,该文件用于设置转码规则和插件,内容如下:
  1. 新建一个test.js,用babel-node命令运行JS文件:
  1. 控制台输出运行结果。

注意:Babel默认只转换新的JavaScript句法,而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

2.在浏览器中运行JS代码

如果需要在浏览器中支持ES6语法,可以引入脚本转换器babel.min.js,以内联脚本或者外部文件链接方式运行:

注意:从Babel 6.0开始,不再直接提供浏览器版本。

更多运行环境支持情况,可参看官网链接:https://babeljs.io/docs/setup/#installation

下一节:ECMAScript6基础学习教程(二)块级作用域

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 单独运行JS文件
  • 2.在浏览器中运行JS代码
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档