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的更多相关文章

  1. es6的let与es5的var定义变量的区别

    es6的let与es5的var定义变量的区别 自身新手第一次接触let关键字的时候,不知道let与var的区别,本能认为是一样,但非如此,比如下述的代码运行就会报错: let hello = 'hel ...

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

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

  3. ES6 arrow function vs ES5 function

    ES6 arrow function vs ES5 function ES6 arrow function 与 ES5 function 区别 this refs xgqfrms 2012-2020 ...

  4. webpack用 babel将ES6转译ES5

    webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...

  5. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  6. 如何使用Babel将ES6转码为ES5?

    一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...

  7. 前端自动化 shell 脚本命令 与 shell-node 脚本命令 简单使用 之 es6 转译

    (背景: 先用 babel 转译 es6 再 用 browserify 打包 模块化文件,来解决浏览器不支持模块化 )(Browserify是一个让node模块可以用在浏览器中的神奇工具) 今天折腾了 ...

  8. ES6数组去重及ES5数组去重方法

    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...

  9. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

随机推荐

  1. SQL插入数据--数据中的某一列来自本表中的数据

    背景: 项目初期使用的配置库和业务库两种数据库并行,所有配置数据位于配置库,所有业务数据根据不同省份位于不同数据库.由于使用省份越来越多,各省的配置数据也越来越多导致配置库的数据量过于庞大,各省共用一 ...

  2. 神经网络_线性神经网络 1 (Nerual Network_Linear Nerual Network 1)

    2019-04-08 16:59:23 1 学习规则(Learning Rule) 1.1 赫布学习规则(Hebb Learning Rule) 1949年,Hebb提出了关于神经网络学习机理的“突触 ...

  3. tensorflow-线性函数训练例子一

    import tensorflow as tfimport numpy as np #create datax_data = np.random.rand(100).astype(np.float32 ...

  4. return和throw某些特性相似

    拷贝构造函数的调用拷贝构造函数会在以下三中情况下被调用(1)当类的一个对象去初始化该类的另一个对象时 int main(){ Point a(1,2); Point b(a);//用对象a初始化对象b ...

  5. Lesson 29 Taxi!

    Text Captain Ben Fawcett has bought an unusual taxi and has begun a new serivice. The 'taxi' is a sm ...

  6. Lesson 25 Do the English speak English?

    Text I arrived London at last. The railway station was big, black and dark. I did not know the way t ...

  7. Vue 学习笔记 -- inline-template

    简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?

  8. ansible基础-加密

    一 简介 注:本文demo使用ansible2.7稳定版 众所周知,ansible是很火的一个自动化部署工具,在ansible控制节点内,存放着当前环境服务的所有服务的配置信息,其中自然也包括一些敏感 ...

  9. Python档案袋( Socket 与 ScoketServer 通信 )

    Socket有一个缓冲区,缓冲区是一个流,先进先出,发送和取出的可自定义大小的,如果取出的数据未取完缓冲区,则可能存在数据怠慢.其中[recv(1024)]表示从缓冲区里取最大为1024个字节,但实际 ...

  10. ASP.NET Core 2.0 MVC项目实战

    一.前言 毕业后入职现在的公司快有一个月了,公司主要的产品用的是C/S架构,再加上自己现在还在学习维护很老的delphi项目,还是有很多不情愿的.之前实习时主要是做.NET的B/S架构的项目,主要还是 ...