关于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 ...
随机推荐
- 【C++常用函数】头文件<algorithm>中的常用函数(绝对值,交换,比较)
swap(a,b) 用于交换a,b两个变量的值: max(a,b) 返回a,b中的最大值: min(a,b) 返回a,b中的最小值: abs(x) 返回x的绝对值,x必须是整数:
- 每秒100W请求,12306秒杀业务,架构如何优化?
如<同样是高并发,QQ/微博/12306的架构难度一样吗?>一文所述,同样是高并发场景,三类业务的架构挑战不一样: QQ类业务,用户主要读写自己的数据,访问基本带有uid属性,数据访问锁冲 ...
- Vue中jsx的最简单用法
最终页面显示效果为 <div class="open-service" style="color: #0199f0; cursor: pointer;"& ...
- vue-cli引用vant使用rem自适应
摘要 由于需要用到弹出层但是懒得造轮子所以使用vant 介绍 使用的node包管理器为yarn vue-cli版本4 rem计算方式为index.html的js脚本计算 安装vant yarn add ...
- Linux下磁盘实战操作命令
企业真实场景由于硬盘常年大量读写,经常会出现坏盘,需要更换硬盘.或者由于磁盘空间不足,需添加新硬盘,新添加的硬盘需要经过格式化.分区才能被 Linux 系统所使用. 虚拟机 CentOS 7 Linu ...
- August 04th, 2019. Week 32nd, Sunday
Making peace with what you don't have, that's what it's all about. 人生在世,不如意者十之八九,保持平常心,命里无时莫强求. Ever ...
- NOIP2019游记
道歉:本文章很快打完了,所以有脏话 第零天 早上睡到6点半九点半从学校出发 有种很忙碌的感觉 在车上异常无聊,和zsf用笔记本看了阿丽塔战斗天使,感觉蛮好看的 阿丽塔的形象很丰富 叙事由雾到开 推荐 ...
- Leetcode103_Binary-tree-zigzag-level-order-traversal
原题: https://leetcode-cn.com/problems/binary-tree-zigzag-level-order-traversal/ 思路,如果无从下手,先要了解二叉树的广度优 ...
- P4762 [CERC2014]Virus synthesis
题意 真是道回文自动机好题. 首先考虑答案必定是一个回文串+剩余部分的形式,因此可以建出回文自动机,之后考虑每个长度为偶数的回文串. 对于一个长度为偶数的回文串,设它在回文自动机上对应的节点为\(x\ ...
- 克隆系统后如何重新清除SID
为什么要清除SID? SID(Security Identifiers,安全标识符)是Windows中标识用户.组和计算机的唯一的号码,Windows操作系统通过SID对计算机和用户进行识别.用户的权 ...