问题:es6及以上版本在IE浏览器上不能执行起来,但Chrome浏览器上轻松运行,解决兼容IE的问题就需要使用babel;这个可以去babel的官网去查看;

关于babel的简单使用,有两种方式:

1、运行时编译,但这种编译会加大页面渲染的时间;

  使用方法:下载babel.min.js引入在需要编译的文件脚本前面;同时相应的<script>标签需要添加type=text/babel;接下来直接运行脚本页面即可;

2、编译完成之后再运行,强烈建议这种方式,不影响浏览器渲染时间;

  使用方法:需要node的支持;使用命令行工具 下载babel相关包。首先在你的需要的项目文件夹执行npm init -y 初始化一下工程;然后执行npm i @babel/col @babel/cli @babel/preset-env -D 下载完相关包之后,打开package.json包文件,在里面的script:{"build":"babel src -d dist"};虽然这些都配置好了,但是还没有说明需要编译成什么样,所以还需要添加.babelrc文件,内容是:{“presets”:[“@babel/preset-env”]};完了之后就可以使用了:在命令行工具里 :npm run build 执行编译就可以将src目录下的js文件编译到dist目录下;只能编译js文件,所以需要将js文件单独引入到html文件中;

关于es6及以上的js编译成es5的更多相关文章

  1. 使用babel将ES6编译成ES5

    现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...

  2. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  3. 使用babel把es6代码转成es5代码

    第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...

  4. Emscripten编译环境搭建--将C和C++编译成JS

    Emscripten编译环境搭建--将C和C++编译成JS 需求:linux环境下用js执行c.c++文件,使用emscirpten编译器 目标:搭建好Emscripten环境 环境:Ubuntu16 ...

  5. 安装 TypeScript 并编译成JS

    官网: https://github.com/microsoft/TypeScript TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为Ja ...

  6. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  7. js编译原理(你不知道的javascript)

    虽然通常将js归类为"动态"或"解释执行"语言,但其实也可把它看成是一门编译语言.只不过这个所谓的编译与传统的编译语言不同,它不是提前编译的,编译结果也不能在分 ...

  8. ionic3搭建笔记及编译成apk

    一.安装node.js 二.安装Ionic2 npm install -g ionic (安装最新版本) ionic -v //查看版本号(是否安装成功) npm uninstall -g ionic ...

  9. 用gulp把less文件编译成css文件

    第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <htm ...

随机推荐

  1. 用 Python 实现植物大战僵尸代码!

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: marble_xu GitHub地址:https://github ...

  2. 爬虫最新的库requests-html库总结

    requests-html是比较新的爬虫库,作者和requests是同一个作者 一.安装依赖 pip install requests-html 我们可以在安装的时候看到他安装了lxml,reuqes ...

  3. javaWeb核心技术第十二篇之分页和条件

    分页:limit ?,? 参数1 : startIndex 开始索引. 参数2 : pageSize 每页显示的个数 n 表示第几页 给定一个特殊的单词 pageNumber select * fro ...

  4. HTML空元素

    什么是空元素? 首先空元素下是没有子级节点和内容的.然后空元素是在开始标签中关闭的,也就是说空元素没有闭合标签的. 在HTML中的空元素有以下几个: <area> <base> ...

  5. d-堆

    二叉堆因为实现简单,因此在需要优先队列的时候几乎总是使用二叉堆.d-堆是二叉堆的简单推广,它恰像一个二叉堆,只是所有的节点都有d个儿子(因此,二叉堆又叫2-堆).下图表示的是一个3-堆.注意,d-堆要 ...

  6. java8-10-Stream的终止操作

      Stream的终止操作   * allMatch 是否匹配所有 * anyMatch 是否匹配一个 * noneMatch 是否没有匹配一个 * findFirst 返回第一个   * count ...

  7. XOR加密作业

    思路 -1.对需要加密的内容进行MD5加密 -2.随机生产32位的十六进制密钥 -3.对密钥和MD5加密内容进行异或运算. 主要问题: -1.如何实现MD5加密 -2.如何随机生成32位16进制密钥 ...

  8. 201871010118-唐敬博《面向对象程序设计(java)》第一周学习总结

    博文正文开头格式:(3分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/p/11435127.html 这个作业的要求在哪里 https:/ ...

  9. 2019CSP-J/S受虐记

    emmmm...... 今年noip很波折,我从7月开始准备 但CCF居然停了noip,这搞得我很迷茫,CCF你在干什么! 然后又恢复了,这有搞得我很懵逼?(还改名叫csp了) 就换了个名,CCF你搞 ...

  10. Python连载6-time包函数简介

    一.接连载5中time模块 1.函数:altzone (1)含义:获取当前时间与UTC时间相差的秒数,再有夏令时的情况下. (2)格式:time.altzone 2.函数:daylight (1)含义 ...