Bable实现由ES6转译为ES5
Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行。
举例说明:
转译前(ES6格式)代码如下:
let User = {
name : '张三',
age : 22
};
let { name, age } = User;
console.log( name, age );
转译后(ES5格式)代码如下:
'use strict';
var User = {
name: '张三',
age: 22
};
var name = User.name,
age = User.age;
console.log(name, age);
如上用Babel转译为ES5格式后就可以在现有的javascript环境下运行了。
babel安装与项目部署步骤如下:
1.新建一个babel_test文件夹,并在此文件夹里面新建src和dist两个文件夹。
2.在babel_test目录下初始化项目,生成 package.json文件。
npm init -y
3.安装bable(全局安装&本地安装)
全局安装
npm install -g babel-cli
本地安装
npm install --save-dev babel-preset-es2015 babel-cli(建议安装在当前目录下)
4.在babel_test目录下新建 .babelrc文件,该文件用来设置转码规则和插件,基本格式如下。(Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel必须要配置这个文件。)
{
"presets": [
"es2015"
],
"plugins": []
}
5.在src文件夹下面新建代码格式为ES6的文件1.js。(文件代码如本文前面ES6格式的代码)
6.在cmd项目目录下运行 babel src/1.js -o dist/2.js ,babel会将ES6代码自动转译并在dist文件下生成ES5格式的代码文件2.js。(文件代码如本文前面ES5格式的代码)
7.编译成功,直接引用1.js就可以在现有环境下执行了。
Bable实现由ES6转译为ES5的更多相关文章
- es6的let与es5的var定义变量的区别
es6的let与es5的var定义变量的区别 自身新手第一次接触let关键字的时候,不知道let与var的区别,本能认为是一样,但非如此,比如下述的代码运行就会报错: let hello = 'hel ...
- 使用babel把es6代码转成es5代码
第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...
- ES6 arrow function vs ES5 function
ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...
- webpack用 babel将ES6转译ES5
webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...
- 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题
在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...
- 如何使用Babel将ES6转码为ES5?
一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...
- 前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译
(背景: 先用 babel 转译 es6 再 用 browserify 打包 模块化文件,来解决浏览器不支持模块化 )(Browserify是一个让node模块可以用在浏览器中的神奇工具) 今天折腾了 ...
- ES6数组去重及ES5数组去重方法
ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
随机推荐
- ubuntu16.04开机时的.local问题
开机时显示:您的当前网络有.local域,我们不建议这样做而且这与AVAHI网络服务探测不兼容,该服务已被禁用 解决方法: 在终端输入:sudo gedit /etc/default/avahi-da ...
- angular-ui-bootstrap typeahead 智能提示 自动补全 获取焦点不触发问题的解决
项目中有一处使用了angular-ui-bootstrap中的typeahead来实现输入框智能提示语自动化补全的功能,存在一个bug, 即输入文字后,当再次点击文本框,其获取焦点后并不会触发智能提示 ...
- Edge-assisted Traffic Engineering and applications in the IoT
物联网中边缘辅助的流量工程和应用 本文为SIGCOMM 2018 Workshop (Mobile Edge Communications, MECOMM)论文. 笔者翻译了该论文.由于时间仓促,且笔 ...
- 通过一个小故事,理解 HTTPS 工作原理
本文摘录参考: 细说 CA 和证书(主要讲解 CA 的使用) 数字签名是什么?(简单理解原理) 深入浅出 HTTPS 工作原理(深入理解原理) HTTP 协议由于是明文传送,所以存在三大风险: 1.被 ...
- Go语言数组和切片的原理
目录 数组 创建 访问和赋值 切片 结构 初始化 访问 追加 拷贝 总结 数组和切片是 Go 语言中常见的数据结构,很多刚刚使用 Go 的开发者往往会混淆这两个概念,数组作为最常见的集合在编程语言中是 ...
- [Swift]LeetCode435. 无重叠区间 | Non-overlapping Intervals
Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...
- [Swift]LeetCode478. 在圆内随机生成点 | Generate Random Point in a Circle
Given the radius and x-y positions of the center of a circle, write a function randPoint which gener ...
- js中对于逗号的运算符!
先展示一个例子! var f = (function f() { return '1'; } , function g(){ return 1; } )(); console.log(typeof f ...
- C# Serialize
一.序列化又称为串行化,是.NET运行时环境用来支持用户自定义类型的机制,目的是以某种存储给对象持久化,或者是将这种对象传输到另一个地方, 二. .NET框架提供了两种序列化的方式 一种是使用Bina ...
- SignalR学习笔记(二)高并发应用
虽然SignalR借助Websocket提供了很强大的实时通讯能力,但是在有些实时通讯非常频繁的场景之下,如果使用不当,还是会导致服务器,甚至客户端浏览器崩溃. 以下是一个实时拖拽方块项目的优化过程 ...