一.介绍:

  Babel是一个Javascript编译器,可以将ES6语法转换成ES5。

  这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。下面是一个例子:

  //转码前:

  input.map(item => item + 1);

  //转码后:

  input.map(function(item){

    return item + 1; 

  });

二.使用ES6语法:

  1. 创建项目test:
  2. npm init
  3. cnpm install –save-dev babel-cli: Babel提供babel-cli工具,用于命令行转码。
  4. cnpm install –-save-dev babel-preset-latest:最新的ES6语法都能包含
  5. Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
  6. 该文件用来设置转码规则和插件,基本格式如下:

    {

    "presets":["latest"]

      //或者

        "presets":["es2015"]

    }

  7.cnpm install babel-core@5:Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core模块获取。

  8.然后,将下面的代码插入网页。

  <script src="node_modules/babel-core/browser.js"></script>

  <!—-浏览器功能: browser-pollfill.js 让浏览器支持所需要的功能-->

    <script src="node_modules/babel-core/browser-pollfill.js"></script>   <script type="text/babel">

      //Your ES6 code

      let a = [1,2],

      b = [...a,'3'];

      document.body.innerHTML = b;

      console.log(b);

    </script>

  9. browser-sync start –server:自动打开浏览器显示

  另外:

  1. babel in.js –-out-file out.js: 将es6的in.js文件转换成es5并放到out.js中

Babel:JavaScript编译器的更多相关文章

  1. JavaScript 编译器-Babel

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以现在就用ES6.ES7编写程序,而不用担心现有环境是否支持. 一.全局安装babel工具 在保证n ...

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

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

  3. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

  4. vue-cli4 + TS构建新项目

    1. 如果你之前没有安装vue-cli,可以通过如下命令进行安装: npm install -g @vue/cli yarn global add @vue/cli 2. 创建vue项目 vue cr ...

  5. webpack基础知识介绍

    1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...

  6. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  7. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  8. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换

    现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...

  9. JavaScript 基础:Babel 转译 class 过程窥探

    零.前言 虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的.当时,假设我们要定义一个可以设置 id 与坐标的类,我们会 ...

随机推荐

  1. 『.NET Core CLI工具文档』(十二)dotnet-pack

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-pack 翻译:dotnet-pack 名称 dotnet-pack - 将代码打包成 NuGet 包 概 ...

  2. Unity 3D json嵌套使用以及多种类型匹配

    我们控制端要发送很多命令给终端设备,其中有速度,方向,开关门,开关灯....方法千万种,我只取一瓢.我还小,不知道其他人是怎么写的.我喜欢把有规律的东西放在一起写!为了我的强迫症! using Uni ...

  3. [Tool] Open Live Writer插件开发

    一 前言 Windows Live Writer(简称 WLW)开源之后变成 Open Live Writer(简称 OLW),原先 WLW 的插件在 OLW 下都不能用了,原因很简单,WLW 插件开 ...

  4. JVM之内存结构

    JVM是按照运行时数据的存储结构来划分内存结构的.JVM在运行Java程序时,将他们划分成不同格式的数据,分别存储在不同的区域,这些数据就是运行时数据.运行时数据区域包括堆,方法区,运行时常量池,程序 ...

  5. SVNKit支持SSH连接

    SVNKit这个开源工具,用于Java语言访问SVN库,咋看的时候很方便,其实坑特别多.我在这里只想跟大家说一句,如果你还没有用过,请不要在生产环境使用这个东西了,兼容性问题搞死你(替换方案是直接用s ...

  6. 浅析天猫H5站点

    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴. ...

  7. mariadb 最新精简压缩版 win64 解压即用

    包含版本: mariadb-10.1.18-winx64 mariadb-5.5.53-winx64 32的没有压缩,估计用的人也比较少. 网盘链接: http://pan.baidu.com/s/1 ...

  8. Java 策略模式和状态模式

    本文是转载的,转载地址:大白话解释Strategy模式和State模式的区别 先上图: 本质上讲,策略模式和状态模式做得是同一件事:去耦合.怎么去耦合?就是把干什么(语境类)和怎么干(策略接口)分开, ...

  9. 纯Swift编写的仿“随遇”应用源码

    纯Swift编写的仿“随遇”App概述 此项目是为了巩固Swift掌握而编写的,素材均来自“随遇”官方App 用Storyboard+Xib+Autolayout的方式来实现UI部分 由于项目不复杂, ...

  10. css 垂直居中

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...