关于es6及以上的js编译成es5
问题: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的更多相关文章
- 使用babel将ES6编译成ES5
现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- 使用babel把es6代码转成es5代码
第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...
- Emscripten编译环境搭建--将C和C++编译成JS
Emscripten编译环境搭建--将C和C++编译成JS 需求:linux环境下用js执行c.c++文件,使用emscirpten编译器 目标:搭建好Emscripten环境 环境:Ubuntu16 ...
- 安装 TypeScript 并编译成JS
官网: https://github.com/microsoft/TypeScript TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为Ja ...
- 将less编译成css的gulp插件
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
- js编译原理(你不知道的javascript)
虽然通常将js归类为"动态"或"解释执行"语言,但其实也可把它看成是一门编译语言.只不过这个所谓的编译与传统的编译语言不同,它不是提前编译的,编译结果也不能在分 ...
- ionic3搭建笔记及编译成apk
一.安装node.js 二.安装Ionic2 npm install -g ionic (安装最新版本) ionic -v //查看版本号(是否安装成功) npm uninstall -g ionic ...
- 用gulp把less文件编译成css文件
第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <htm ...
随机推荐
- JavaScript -- 筑基
本片博客记录了我JavaScript筑基阶段的学习内容,JavaScript不是Java,但是我下意识的把它和java对比学习,有些地方比较有趣,有些地方从java角度看,简直匪夷所思,不过现在总体感 ...
- 连接SpringBootAdmin 异常 Name or service not known
环境: 服务器:Linux 客户端:Windows 当客户端连接到SpringBootAdmin的时候,报了如下异常 明明显示可以连接了,但是就是报了客户端INSTANCE DOWN (down机 ...
- 动态SQL与变量绑定
有时候动态sql需要进行变量的赋值,这个时候就需要调用系统的存储过程sp_executesql了.使用中还是有些注意事项,代码如下: --字符型字段需声明为NVARCHAR类型 ),) --动态SQL ...
- Python中编写类的各种技巧和方法
简介 有关 Python 内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Pickling). 你可以把它当作一 ...
- Java生鲜电商平台-商城优惠券设计要点复盘与总结
Java生鲜电商平台-商城优惠券设计要点复盘与总结 Java生鲜电商平台本文将从优惠券设计用户端,需求端,业务流程全方案解析优惠券设计方案 为什么要设计优惠券 设计优惠券的核心:拉新和促活 新产品上线 ...
- Locust压测结果准确性验证
最近闲着没事做,就重新研究了一下基于python语言的Locust性能测试框架 发现在压测的过程中,虽然设置了100并发,但是通过实际监控,完全看不到100并发压测的效果 通过代码AOP日志监控接口的 ...
- for循环使用element的折叠面板遇到的问题-2
需求:每次添加一个折叠面板时,让最新的折叠面板展开,其余的关闭 动态控制展开折叠面板,首先绑定name,v-model = activeName 我们的项目中是当添加折叠面板时,直接push进这个数组 ...
- Android ndk 加载简单的gif 图像
首先获取一个安卓权限 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"> ...
- 未能找到元数据文件**.dll解决办法
解决方案里有很多项目.生成时提示100多个错误,都是未能找到元数据文件**.dll. 那就清理一下解决方案,一个一个来吧. 生成GateWay.Utilities项目时,虽然提示成功了,却发现bin/ ...
- PM8909 linear charger硬件概述
电池充电是由qpnp-vm-bus.c(电池驱动BMS)和qpnp-linear-charger.c(线性充电器)组成: SMMB charger:Switch-ModeBattery Charger ...